vue父子组件传值，子组件不难直接修改父组件的值，所以都是用emit去修改。
vue也提供了.sync和v-model组件传值的语法糖，可以更快的修改，但总归是要使用emit。
这次做项目，发现了一个可以直接双向绑定到input的方法，那就是直接传递对象，用深浅拷贝的原理，直接双向绑定。
直接引入vue2.x试了一下：
<div id="app">
<children :obj="obj"></children>
</div>
<script src="../js/vue.js"></script>
<script>
Vue.component('children', {
template: `
<div>
<input v-model="obj.a"/>
</div>
`,
model: {
prop: 'obj'
},
props: ['obj'],
computed:{
objChild(){
return this.obj;
}
},
})
new Vue({
el: '#app',
data(){
return {
obj: {
a: 10
},
}
},
watch: {
'obj.a'(cur){
console.log(cur);
}
}
})
</script>
在vue3也试了一下：
//父组件
<HelloWorld :obj="obj" />
let obj = ref({ a: 10 });
watch(obj.value, (cur: any) => {
console.log(cur.a);
});
//子组件
<input type="text" v-model="obj.a" />
const props = defineProps<{ obj: any }>();
vue父子组件直接是单向数据流，是单向下行绑定，目的是防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。
所以通过传对象进行双向绑定，有点旁门左道，但是在你明确自己在做什么的场景下，使用起来会更简单快捷，看个人选择吧。
欢迎关注订阅号 coding个人笔记
