共计 998 个字符，预计需要花费 3 分钟才能阅读完成。
在组件内部的 input 框 中监听 input 事件，并给 input 事件 绑定 triggerInput 函数当往 input 框 中输入内容时，触发 triggerInput 函数 triggerInput 函数 向外部 emit 一个 edit 事件 和 输入框的值然后在组件上监听这个 edit 事件 并给 edit 事件 绑定 triggerEdit 函数此时会触发 triggerEdit 函数，triggerEdit 函数 就能去修改根实例上的 data
triggerEdit 函数 的第一个参数为你想要修改的根实例 data 的 key 第二个参数 $event 是套路，有这个参数才能在 triggerEdit 函数 中获取组件内部 emit 出来的 input 框的值
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title></title>
<script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script>
</head>
<body>
<div id=”app”>
根实例的 data message：{{message}}
<br>
根实例的 data name：{{name}}
<br>
message:
<component-demo1
v-on:edit=”triggerEdit(‘message’, $event)”
></component-demo1>
name:
<component-demo1
v-on:edit=”triggerEdit(‘name’, $event)”
></component-demo1>
</div>
</body>
<script>
Vue.component(‘component-demo1′, {
template: `
<div>
组件内的 input：
<input
v-on:input=’triggerInput’
>
</div>
`,
methods: {
triggerInput: function (e) {
this.$emit(‘edit’, e.target.value)
},
},
})
var app = new Vue({
el: ‘#app’,
data: {
message: ‘hello vue’,
name: ‘gua’,
},
methods: {
triggerEdit: function (key, value) {
this[key] = value
}
}
})
</script>
</html>
