共计 1088 个字符，预计需要花费 3 分钟才能阅读完成。
Vue 通过 prop 进行双向数据绑定。子组件数据变动，个别只能通过 this.$emit(func, val) 回调父组件函数来传值给父组件。
Vue2.3 版本引入 sync，作为一个事件绑定语法糖，当子组件触发事件时，父组件会响应事件并实现数据更新：官网
1. 应用 Vue.sync 和 this.$emit(‘update:title’, newTitle)
父组件代码：
data() {
return {val: ''}
},
<child :childValue.sync="val"></child>
<div>{{val}}</div>子组件代码：
props: {
childValue: {
type: String,
default: ''
},
},
data() {
return {val: ''}
},
methods: {checkVal() {this.$emit('update:childValue', this.val)
},
}
<input type="text" v-model="val" @input="checkVal">下面的办法就是能够在子组件更改父组件的值了，除此之外，还能够应用 $emit(fun, val) 办法和 $parent:
2. 应用 $emit(fun, val)
父组件代码：
data() {
return {val: ''}
},
methods: {checkVal(val) {this.val = val},
}
<child @checkVal="checkVal"></child>
<div>{{val}}</div>子组件代码：
props: {
},
data() {
return {val: ''}
},
methods: {checkVal() {this.$emit('checkVal', this.val)
},
}
<input type="text" v-model="val" @input="checkVal">3. 应用 $parent
父组件代码：
data() {
return {val: ''}
},
methods: {checkVal(val) {this.val = val},
}
<child></child>
<div>{{val}}</div>子组件代码：
props: {
},
data() {
return {val: ''}
},
methods: {checkVal() {// 通过 $parent 层叠能够一层一层地往上追溯各级父组件，比方 this.$parent.$patent.checkVal()
this.$parent.checkVal(this.val)
},
}
<input type="text" v-model="val" @input="checkVal">
正文完
