vue父子组件通信数据双向绑定

最新推荐文章于 2022-12-03 16:05:50 发布

weixin_43411214

最新推荐文章于 2022-12-03 16:05:50 发布

阅读量186

点赞数

文章标签： javascript vue.js

本文链接：https://blog.csdn.net/weixin_43411214/article/details/120095410

版权

本文详细介绍了Vue.js中三种父子组件通信的方法：1) 使用v-model结合props和$emit更新父组件数据；2) 通过v-model的value和input事件实现双向数据绑定；3) 利用.sync修饰符实现属性同步更新。这些方法在日常开发中非常实用，帮助开发者更好地理解和掌握Vue组件间的通信机制。

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

一、方法1：通过v-model,子组件使用model绑定属性

1.父组件中

      //调用的子组件
        <upload-img   v-model="form.coverUrl" ></upload-img>
        <script>
        export default {
           data(){
           return{
              form:{
                   coverUrl:'',
              }
           }
        }
        </script>

2、子组件中

<template>
  <div>
    <button @click="clickBtn"></button>
  </div>
</template>
<script>
export default {
  name: 'upload-img',
  props: ['value'],
    model: {
      prop: 'value',//获取父组件传来的值
      event: 'change',//方法，通过emit将子组件值传给父组件
    },
  data() {
    return {
    }
  },
  methods: {
    clickBtn() {
      this.$emit('change',this.value+2);//传递this.value+2给父组件
    },
  },
}
</script>

二、方法2：通过v-model，子组件使用value,input绑定属性

1.父组件中

      //调用的子组件
        <upload-img   v-model="form.coverUrl" ></upload-img>
        <script>
        export default {
           data(){
           return{
              form:{
                   coverUrl:'',
              }
           }
        }
        </script>

2、子组件中

<template>
  <div>
    <button @click="clickBtn"></button>
  </div>
</template>
<script>
export default {
  name: 'upload-img',
  props: {
      value: { // 必须要使用value
　　　　　default: '',
　　　　},
    },
  methods: {
    clickBtn() {
        this.$emit('input', this.value+2) // 这儿必须用input 发送数据，发送的数据会被父级v-model=“test”接受到，再被value=form.coverUrl传回来。
    },
  },
}
</script>

三、方法3：通过.sync 修饰符

1.父组件中

      //调用的子组件
       <wordInput :wordVal.sync='inputVal'/>

2、子组件中

<template>
    <div>
        <input type="text"  v-model="wordValShow">
    </div>
</template>

<script>
    export default {
        name: 'wordInput',
        props:{
            wordVal:{
                type:String,
                default:''
            }
        },
        data(){
            return {
                wordValShow:this.wordVal
            }
        },
        watch:{
            wordValShow(val){
                this.$emit('update:wordVal', val)
            }
        }
    }
</script>