介绍
子组件可以直接操作父组件的数据，但vue不推荐这么做。
单向数据流
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中
vue认为：子组件变更父级组件的状态，导致应用的数据流向难以理解，子组件不应改动 prop
官网解释：
https://cn.vuejs.org/v2/guide/components-props.html#%E5%8D%95%E5%90%91%E6%95%B0%E6%8D%AE%E6%B5%81
父组件监听子组件事件
通过 父组件监听子组件事件，来实现 子组件 操作 父组件的数据
定义子组件
var std_com={
template:`<div>子组件<input type='button' value='点击' @click='$emit("change")'></div>`
}
Vue.component("std-com",std_com)
关键： 在子组件中定义 点击事件：@click='$emit("change") ，通过调用 $emit() 方法，参数 change 是 自定义事件名称，表示：点击该按钮时，触发 自定义 事件 change，父组件会 监听到 该事件
使用子组件
<std-com @change="changeMsg()"></std-com>
关键： @change="changeMsg()"，父组件监听 自定义事件 change，并指定处理函数changeMsg()
完整代码
<div id="app" >
<input type="text" v-model="msg">
<std-com @change="change()"></std-com>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script>
var std_com={
template:`<div>子组件<input type='button' value='点击' @click='$emit("change")'></div>`
}
Vue.component("std-com",std_com)
var app = new Vue({
el: '#app',
data: {
msg:'李雷'
},
methods: {
change:function(){
this.msg="韩梅梅"
}
}
})
</script>
缺点：子组件 没有 向父组件传递数据
父组件获取子组件的数据
定义子组件
var std_com={
data:function(){
return {
name:'韩梅梅'
}
},
template:`<div>子组件
<input type='text' v-model="name">
<input type='button' value='点击' @click='$emit("change",name)'></div>`
}
Vue.component("std-com",std_com)
关键： @click='$emit("change",name)' ，通过 $emit()方法的第二个参数，向父组件传递数据
使用子组件
<std-com @change="changeMsg($event)"></std-com>
关键： @change="changeMsg($event)" ，通过 $event 获取子组件传递的数据
完整代码
<div id="app" >
<input type="text" v-model="msg">
<std-com @change="changeMsg($event)"></std-com>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script>
var std_com={
data:function(){
return {
name:'韩梅梅'
}
},
template:`<div>子组件
<input type='text' v-model="name">
<input type='button' value='点击' @click='$emit("change",name)'></div>`
}
Vue.component("std-com",std_com)
var app = new Vue({
el: '#app',
data: {
msg:'李雷'
},
methods: {
changeMsg:function(param){
console.log(param)
this.msg=param
}
}
})
</script>