1、本章知识点
- 事件命名才用 "-" 分割。(不采用驼峰，因为html是大小写不敏感)
- .sync 修饰符的使用
2、$emit 作用与语法
通常用于子组件调用父组件方法,实现子组件主动与父组件进行通讯。
<!---html-->
<div id="app">
<my-component @my-fun='parentFun'></my-component>
</div>
//这里注册了一个全局组件
Vue.component('my-component',{
template:`<button @click='clickMe'>调用父类的方法</button></div>`,
methods:{
clickMe(){
this.$emit('my-fun',123)
}
}
})
var vm = new Vue({
el:'#app',
methods:{
parentFun(value){
alert(value);
}
}
})
这时点击子组件的按钮时，弹出了123。这里的 @my-fun='parentFunc' 就是创建了一个调用父组件parentFun方法的事件my-fun。然后在子组件通过this.$emit('my-fun',123)就可以触发事件。
3、.sync修饰符的使用
作用：用于实现父子组件数据的双向绑定 (语法糖)
.sync实现数据的双向绑定
原理：通过.sync绑定的父子组件的值。实际上上Vue自动为子组件创建一个事件，用来改变父组件值，而事件名默认为: update: prop值。以下面案例进行说明:
通过在子组件添加: :child-value.sync ='value'。 Vue看到 .sync关键字会自动为子组件创建一个叫做 update:childValue或者update:child-value的事件。(这两种事件名都可以成功调用) 这个事件可以接受参数，并自动将参数赋给父组件的 value。可以理解为事件是引用了这样的方法
" (value) => this.value = value " 可以看到在后面子组件的input的触发方法我成功调用事件,将子组件的 <input> 输入传递给父组件。
<!-- html代码 -->
<div id="app">
修改父组件的值:<input type='text' v-model='value'></input><br>
父组件的值:{{value}}
<my-component :child-value.sync='value' @my-fun='parentFun'></my-component>
</div>
Vue.component('myComponent',{
props:['childValue'],
template:`<div>修改子组件的值:<input type='text' ref="inputID" @input='inputFun($event)'></input><br>
子组件的值：{{ myData }}<br></div>`,
data(){
return{
myData: this.childValue
}
},
methods:{
inputFun(e){
const value = e.target.value;
this.myData = value;
this.$emit('update:childValue',value)
}
},
watch:{
'childValue':function(val){
this.myData = val;
this.$refs.inputID.value = this.myData;
}
}
})
var vm = new Vue({
el:'#app',
data:{
value:'',
},
})
最终效果图： 改变父组件的值 或是 改变子组件的值，父子组件都会跟着变化。
3.补充说明：关于为什么要使用watch监听
因为这里涉及到修改子组件的值，所以没有让<input>直接绑定props值。Vue并不推荐在子组件中修改props的值 ( 具体可以参考: Vue中props的用发 )。 所以选择将props当作data值的初始值。又因为props只被用作为初始值，所以当父组件的值发生改变，引发子组件的props值发生改变，并不是传递给子组件的data属性。所以这里使用watch来监听props的值，实时的改变data的值。
