Vue3：父组件与子组件的双向绑定

起因：想自己封装一个通用组件方便后续开发，结果因为使用defineProps的方式传递参数发现无法通过子组件修改父组件传递过来的参数

官方文档解释：所有的 props 都遵循着单向绑定原则，props 因父组件的更新而变化，自然地将新的状态向下流往子组件，而不会逆向传递。这避免了子组件意外修改父组件的状态的情况，不然应用的数据流将很容易变得混乱而难以理解，所以想要直接在子组件修改props就是不可能的？！想过在子组件中使用自定义事件将值传递给父组件实现修改父组件中的值，但是看到代码相对复杂并且修改一个就要使用一次自定义事件，直接让代码显得杂乱无章，苦思冥想之际，看到一篇文章介绍Vue3中一个新的宏函数defineModel，在子组件中使用defineModel来定义需要传递的参数，父组件中使用v-model绑定传递的参数，就可以实现父组件与子组件中数据的双向绑定。

以下是一个简单示例

父组件代码

1
2
3
4
5
6
7
8
9
<template>
  <CommonInput v-model="inputValue" />
</template>

<script setup>
import { ref } from "vue";

const inputValue = ref();
</script>

子组件代码

1
2
3
4
5
6
7
<template>
  <input v-model="model" />
</template>

<script setup>
const model = defineModel();
</script>

传递多个参数的形式如下

父组件

1
2
3
4
5
6
7
8
9
10
<template>
  <CommonInput v-model:value1="inputValue1" v-model:value2="inputValue2" />
</template>

<script setup>
import { ref } from "vue";

const inputValue1 = ref();
const inputValue2 = ref();
</script>

子组件

1
2
3
4
5
6
7
8
9
<template>
  <input v-model="value1" />
  <input v-model="value2" />
</template>

<script setup>
const value1 = defineModel("value1");
const value2 = defineModel("value2");
</script>

使用defineModel来实现父组件与子组件数据的双向绑定，比原始的方法相对简化了一些代码，并且更易于理解。