我有一个项目，在项目中我有 3 个文件:
1 。 index.html
2。主.js
3。 Vue.js(Vue 库)
我的 index.html:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body{
padding-top: 40px;
}
</style>
</head>
<body>
<div id="root" class="container">
<coupon @applied="OnCouponApplied"></coupon>
<h1 v-show="couponApplied">applied</h1>
</div>
<script src="../index/vue.js"></script>
<script src="main.js"></script>
</body>
</html>
还有我的 main.js :
window.Event=new Vue();
Vue.component('coupon',{
name:'coupon',
template:'<input placeholder="enter you`r code" @blur="OnCouponApplied">',
methods:{
OnCouponApplied(){
Event.$emit('applied');
}
}
});
new Vue({
el:'#root',
data:{
couponApplied:false
},
created(){
Event.$on('applied',()=>alert('handle!'));
}
});
但我有两个警告:
警告:
vue.js:597 [Vue warn]: Property or method "OnCouponApplied" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
(found in <Root>)
vue.js:597 [Vue warn]: Invalid handler for event "applied": got undefined
found in
---> <Coupon>
<Root>
它工作正常，现在我也想知道是否有解决这些警告的办法？
最佳答案
在 main.js 中，我们在 Vue 实例中没有 OnCouponApplied。
所以我删除了 index.html 中的 OnCouponApplied。
并修复 main.js 以获得更好的 View (不要使用 $emit 和 $on):
window.Event=new class{
constructor(){
this.vue=new Vue();
}
fire(event,data=null){
this.vue.$emit(event,data);
}
listen(event,callback){
this.vue.$on(event,callback);
}
};
Vue.component('coupon',{
name:'coupon',
template:'<input placeholder="enter you`r code" @blur="OnCouponApplied">',
methods:{
OnCouponApplied(){
Event.fire('applied');
}
}
});
new Vue({
el:'#root',
created(){
Event.listen('applied',()=>alert('handle!'));
}
});
关于javascript - vue dev工具中的警告，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50626686/