Vue 父子组件实现数据双向绑定效果

2022-06-14 本文已影响0人沁园Yann

方式一：通过监听事件实现

父组件将数据传递给子组件通过 props 实现；而子组件将数据传递给父组件通过事件来实现，在子组件中定义一个事件，在该事件中传递值，由父组件中监听这个事件。通过这种方式实现父子组件双向绑定的效果最常见。

子组件（sonTest.vue）案例代码：

<template>
  <el-select v-model="value" placeholder="请选择" @change="change">
    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
  </el-select>
</template>

<script>
  export default {
    name: 'sonTest',
    // props 下定义父组件传递给子组件的数据
    props: {
      // 父组件使用子组件时通过 :options 传递给子组件
      options: {
        type: Array,
        default: []
      }
    },
    data() {
      return {
        value: ''
      }
    },
    methods: {
      change() {
        console.log('子组件下拉框值发生改变：', this.value)
        // 当下拉框中选定的值发生改变后，通过 $emit 回调 update 事件，并将修改后的值返回给父组件
        this.$emit('update', this.value) // 触发父组件的 @update 事件
        // 父组件使用子组件时通过 @update 指定回调的处理方法
      }
    }
  }
</script>

父组件案例代码：

<template>
    <son-test :options="options" @update="update"></son-test>
</template>

<script>
  import SonTest from './sonTest'
  export default {
    name: 'fatherTest',
    components: { SonTest },
    data() {
      return {
        value: '',
        options: [
          { value: '选项1', label: '黄金糕' },
          { value: '选项2', label: '双皮奶' },
          { value: '选项3', label: '蚵仔煎' },
          { value: '选项4', label: '龙须面' },
          { value: '选项5', label: '北京烤鸭' }
        ],
      }
    },
    methods: {
      update(newValue) {
        // 与 value 实现双向绑定效果
        this.value = newValue
        console.log('子组件通过事件传递过来的值：', newValue)
      },
    }
  }
</script>

优点：可以实现父子组件多个值的双向绑定效果。

缺点：父组件需要编写监听子组件事件的代码。

方式二：通过 v-model 实现

在子组件中指定 model 变量，父组件中通过 v-model 指令来实现双向绑定，通过这种方式父组件无需监听子组件的事件。

子组件（sonTest.vue）案例代码：

<template>
  <el-select v-model="sonValue" placeholder="请选择">
    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
  </el-select>
</template>

<script>
  export default {
    name: 'sonTest',
    // props 下定义父组件传递给子组件的数据
    props: {
      // 父组件使用子组件时通过 :options 传递给子组件
      options: {
        type: Array,
        default: []
      },
      value: {
        type: String,
        default: ''
      }
    },
    model: {
      // 需要双向绑定的 props 变量名称，也就是父组件通过 v-model 与子组件双向绑定的变量
      prop: 'value',
      // 定义由 $emit 传递变量的名称
      event: 'newValue'
    },
    data() {
      return {
        // 子组件不能修改 props 下的变量，所以定义一个临时变量
        sonValue: this.value
      }
    },
    watch: {
      // 监听 sonValue 临时变量，如果临时变量发生变化，那么通过 $emit 将新的值传递给父组件
      sonValue(value) {
        console.log('子组件下拉框值发生改变：', this.sonValue)
        // 【注意】newValue x需要和 model.event 定义的值一致
        this.$emit('newValue', this.sonValue)
      }
    }
  }
</script>

父组件案例代码：

<template>
    <son-test :options="options" v-model="value"></son-test>
</template>

<script>
  import SonTest from './sonTest'
  export default {
    name: 'fatherTest',
    components: { SonTest },
    data() {
      return {
        value: '选项1',
        options: [
          { value: '选项1', label: '黄金糕' },
          { value: '选项2', label: '双皮奶' },
          { value: '选项3', label: '蚵仔煎' },
          { value: '选项4', label: '龙须面' },
          { value: '选项5', label: '北京烤鸭' }
        ],
      }
    },
    watch:{
      // 下面这个监听只是为了打印显示
      value(newValue){
        console.log('value 值发生改变：', newValue)
      }
    }
  }
</script>

优点：父组件无需编写额外的代码，直接通过 v-model 实现双向绑定。

缺点：这种方式只能双向绑定一个值。

参考原文链接：https://blog.csdn.net/weixin_44496396/article/details/125166943

—————————下面是在项目中看到的实现方式——————————

方式三：

子组件（sonTest.vue）案例代码

<template>
  <div :class="['class1',{hide:isShow}]">{{myValue}}</div>
</template>

<script>
  export default {
     name: 'sonTest',
    // props 下定义父组件传递给子组件的数据
    props: {
      isShow: {
        type: Boolean,
        default: true,
      },
      myValue: {
        type: String,
        default: ''
      }
    }
  }
</script>

父组件案例代码

<template>
    <son-test :myValue="myValue" :isShow="isShow"></son-test>
</template>

<script>
  import SonTest from './sonTest'
  export default {
    name: 'fatherTest',
    components: { 
       "son-test": SonTest 
    },
    data() {
      return {
          isShow:  true,
          myValue: "Zero",
        }
    }
}
</script>

方式四：

这种方法可以实现修改子组件的属性，但是页面刚加载的时候，会报找不到属性。
子组件（sonTest.vue）案例代码

<template>
  <div :class="['class1',{hide:isShow}]">{{myValue}}</div>
</template>

<script>
  export default {
     name: 'sonTest',
    // props 下定义父组件传递给子组件的数据
    props: {
      isShow: {
        type: Boolean,
        default: true,
      },
      myValue: {
        type: String,
        default: ''
      }
    }
  }
</script>