vue父子组件双向数据绑定

最新推荐文章于 2024-12-06 06:19:22 发布

virus578

最新推荐文章于 2024-12-06 06:19:22 发布

阅读量224

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue 双向绑定开发组件化响应式

本文链接：https://blog.youkuaiyun.com/qq_34767115/article/details/96385603

vue 专栏收录该内容

2 篇文章

订阅专栏

本文介绍Vue中组件间如何实现双向数据绑定，包括使用v-model语法糖简化prop/$emit的过程，以及通过对象属性实现复杂的数据绑定场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

随着前端项目越来越大，以及易维护，以易扩展的原则，方便多人协作开发，组件式开发越来越受欢迎。但是就随之而来的问题，父子组件的双向数据绑定的问题怎么解决呢？

prop/$emit
对象的形式

1.v-model是prop/$emit的语法糖
父组件

//parent
<template>
  <div>
    <!-- 1.v-model -->
    <p>父组件</p>
   <input v-model="name" type="text">
    <hr>
    <p>子组件</p>
        <child1 v-model="name" />
  </div>
</template>
<script>
 export default {
   data: ()=>({
     name: 'virus',
   }),
   components: {
     child1: require('./child1').default,
   }
 }
</script>

子组件

<template>
  <input v-model="name1Colne" type="text">
</template>
<script>
 export default {
   props: {
    value:{}
   },
    watch: {
      name1Colne(v) {
        this.$emit('input',v)
      },
    },
   components: {
   },
   data(){
     return {
       name: '',
       name1Colne: this.value
     }
   }
 }
</script>
<style lang="scss" scoped>
 
</style>

如果想修改v-meodel默认的传递给子组件值value 可以这样 props需要和model值一致 event修改默认提交事件

<template>
  <input v-model="name1Colne" type="text">
</template>
<script>
 export default {
   props: {
     name1:{}
   },
    model: {
      prop:'name1',
      event: 'change'
    },
    watch: {
      name1Colne(v) {
        this.$emit('change',v)
      },
    },
   components: {
   },
   data(){
     return {
       name1Colne: this.name1
     }
   }
 }
</script>
<style lang="scss" scoped>
 
</style>

2.对象下的属性来实现双向数据绑定
父组件

//parent
<input v-model="user.name" type="text">
< child2 :user="user" />

<script>
 export default {
   data: ()=>({
     user: {
      name: 'virus'
     },
components: {
     child2: require('./child2').default,
   }

 }

子组件

//child
<template>
 <input type="text" v-model="user.name">
</template>
<script>
 export default {
   props: {
     user:{}
   },
   data: ()=>({
   }),
   components: {
   }
 }
</script>