Vue之自定义事件

<base-input @focus.native=“onFocus”>

Vue.component(‘base-checkbox’,{
model:{
prop:“checked”,
event:“change”
},
props:{
checked:Boolean
},
template:`
<input
type=“checkbox”
v-bind:checked=“checked”
v-on:change=“$emit{(}^{\prime }chang{e}^{\prime },$event.target.checked)”

`
})

var app = new Vue({
el:"#app",
data:{
login:true
},
methods:{
onChange:function(value){
this.login = value
},
onFocus:function(){
console.log(“onFocus called”);
}
}
})

比较v-model和上面两种写法
v-bind可以去掉，上面的focus通过修饰符在组件的根元素上监听原生事件

var app = new Vue({
el:"#app",
data:{
},
methods:{
onFocus:function(){
console.log(“onFocus called”);
}
}
})
这种情况下会监听失败，因为input已经不根元素

var app = new Vue({
el:"#app",
data:{
},
methods:{
onFocus:function(){
console.log(“onFocus called”);
}
}
})
主要需要在inputListeners里写入focus方法进行调用
首先调用这里面的方法，在其中找见所有的包含的进行调用
为了解决上述的根元素监听失效，提供了一个$listeners的属性（这是一个对象，包含作用在这个组件上的所有的监听器）

.sync修饰符：

var app = new Vue({
el:"#app",
data:{
doc:{
title:“hello world”
}
},
methods:{
onFocus:function(){
console.log(“onFocus called”);
},
updata:function(title){
this.doc.title = title;
}
}
})

实现的两种双向数据绑定的方法都可以
通过父组件调用data里的数据展示，然后传给子组件，子组件调用方法后又将值传出，父组件接收后调用方法将data里的值进行修改

var app = new Vue({
el:"#app",
data:{
doc:{
title:“hello world”
}
},
methods:{
onFocus:function(){
console.log(“onFocus called”);
},
updata:function(title){
this.doc.title = title;
}
}
})

通过.sync修饰符能够更加简单的进行双向数据绑定，但是需要版本在2.3以上