Vue3 三种方式实现组件数据双向绑定

Vue3 三种方式实现组件数据双向绑定

在 Vue 中，组件数据双向绑定是一项非常重要的特性，它使得我们能够轻松地在组件中处理数据的变化并将其同步到视图

比如我们想要在父组件中修改数据能够同步给子组件，并且子组件修改数据也能同步给父组件，使他们数据一方发生变化，则双方都发生改变。

实现组件数据双向绑定有三种写法分别是 常规写法、v-model、defineModel，下面给大家一一演示

常规写法

在点击父组件按钮时修改数据并同步给子组件

<script setup lang="ts">
import {
      ref } from 'vue';
import Hello from './components/Hello.vue';

const data = ref("Hello World")

// 通过调用该事件完成修改数据的操作
const changeData = (value: string) => {
     
  data.value = value
}
</script>

<template>
  <h1>{
  { data }}</h1>
  <button @click="data = 'Hello Vue3'">修改子组件的数据</button>

  <!-- 简写：<Hello :data="data" @update="data = $event" /> -->
  <Hello :data="data" @update="changeData" />
</template>

点击子组件中的按钮触发父组件的自定义事件 update 绑定的 changeData 方法，并将参数 你好，世界！ 传递给父组件的方法： changeData 从而实现更改父组件的数据

<script setup lang="ts">
const props = defineProps<{
      data: string }>()
const emit = defineEmits<(e: "update", value: string) => void>()
</script>

<template>
  <h1>{
  { data }}</h1>
  <button @click="emit('update', '你好, 世界!')">修改父组件的数据</button>
</template>

可以发现这种写法非常繁琐，子组件修改数据还要通过触发事件来完成

v-model

在 Vue3 中，使用 v-model 指令来实现组件