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>ponent('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个人笔记