Vue.sync和this.$emit('update-title',newTitle)实现组件通信

Vue通过prop进行双向数据绑定。当子组件的数据发生变化时，一般只能通过this.$emit(func,val)来回调父组件的函数，将值传递给父组件。Vue2.3版本引入sync作为事件绑定语法糖。当子组件触发事件时，父组件会响应事件并实现数据更新：官网1.使用Vue.sync和this.$emit('update:title',newTitle)父组件代码：data(){return{val:''}},

子组件代码:props:{childValue:{type:String,默认:''},},data(){return{val:''}},方法:{checkVal(){this.$emit('update:childValue',this.val)},<输入类型="text"v-model="val"@input="checkVal">上面的方法是在子组件中改变父组件的值。另外，还可以使用$emit(fun,val)方法和$parent:2.使用$emit(fun,val)父组件代码：data(){return{val:''}},methods:{checkVal(val){这个。val=val},},

{{val}}

子组件代码：props:{},data(){return{val:''}}，方法：{checkVal(){this.$emit('checkVal',this.val)},3。使用$parent父组件代码：data(){return{val:''}}，方法：{checkVal(val){this.val=val},}

{{val}}

子组件代码：props:{},data(){return{val:''}},methods:{checkVal(){//级联通过$parent逐层追溯父组件，如this.$parent.$patent.checkVal()this.$parent.checkVal(this.val)},