props子组件父组件数据双向绑定(官方推荐的方法)
参考文档:vue-props自定义事件
产生原因: 父组建向子组建传值是通过props传递值,由于props是单向数据流,所以子组建需要向父组建更新数据时无法传递,此时,这时候就需要用到如下方法:
父组建
// 正常传递数据:
<myInput :syncdata="data" ></myInput>
// sync传递数据:
<myInput :syncdata.sync="data" ></myInput>
子组建
// 子组建正常使用props引入数据
props: ['syncdata']
// 更新父组建绑定的数据
this.$emit('update:syncdata', true) // 会告诉父组建,syncdata绑定的值data修改为true