vue使用对象进行父子组件双向绑定

最新推荐文章于 2024-09-23 13:58:08 发布

wade3po

最新推荐文章于 2024-09-23 13:58:08 发布

阅读量713

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/wade3po/article/details/124822202

版权

本文介绍了在Vue中如何实现父子组件的双向绑定，包括通过对象传递和使用vue2.x及vue3的特性。虽然Vue提倡单向数据流，但直接双向绑定在特定场景下能简化代码。注意这种方式可能带来数据流向的复杂性，需谨慎使用。

摘要由CSDN通过智能技术生成

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