Vue3父子组件数据双向绑定

更多详细内容请前往我的个人博客

一、直接上代码

父组件：

<template>
  <div>
    <h1>父组件</h1>
    <p>用户名： {{username}} </p>
    父组件输入框：<input type="text" v-model="parentValue" />
    <p>---------------------------------------------------------------------------------</p>
    <Comp2 v-model:name="username" :value="parentValue"/>
  </div>
</template>

<script>
import Comp2 from "./Comp2.vue"

export default {
  components: { Comp2 },
  data() {
      return {
          username: '',
          parentValue:"父组件传给子组件的值.."
      }
  }
};
</script>

子组件：

<template>
  <h1>子组件</h1>
  <div class="border blueviolet">
    用户名： <input type="text" v-model="username" @input="changeUsername" />
  </div>
  <br>
  <div>父组件输入框的数据：{{value}}</div>
</template>

<script>
export default {
  props: {
    name: String,
    value: String,
  },
  watch:{
    value(){
      console.log(this.value); // 父组件传给子组件的值
    }
  },
  data() {
    return {
      username: "",
    };
  },

  methods: {
    changeUsername() {
      this.$emit("update:name", this.username);
    },
  },
};
</script>

二、说明：

vue3 中，通过 v-model:propName 实现自定义组件间数据的双向绑定。使用方法：

（1）父组件通过 “v-model:绑定的属性名” 传递数据属性，支持绑定多个属性；

（2）子组件配置emits，通过 “update:属性名” 的格式定义更新事件

需要注意的是：

（1）子组件也并不是直接拿 props 传的变量直接用，而是需要声明一个响应式变量 - 通过 ref(props.modelValue) 声明基于 props 传的变量值为初始化值的响应式数据。

（2）且如果父组件传的是异步数据的话，还需要对其进行监听。

（3）当子组件数据改变时需要通过 emit(‘update:modelValue’, e) 去修改父组件数据实现双向绑定。

更详细的说明： http://t.zoukankan.com/goloving-p-15514672.html