Vue 父子组件实现数据双向绑定效果的两种方式(案例代码)

目录

• 方式一：通过监听事件实现
• 方式二：通过 v-model 实现

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

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

子组件案例代码：

<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>

<style scoped>

</style>

父组件案例代码：

<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>

<style scoped>

</style>

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

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

方式二：通过 v-model 实现

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

子组件案例代码：

<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>

<style scoped>

</style>

父组件案例代码：

<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>

<style scoped>

</style> 

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

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

到此这篇关于Vue 父子组件实现数据双向绑定效果的两种方式(案例代码)的文章就介绍到这了,更多相关vue父子组件数据双向绑定内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！