v-model的隐藏玩法

Vue 3 中 <script setup> 与 props 的"双向绑定"实现原理

Props 的单向数据流特性

• 不可变性原则

  props 是父组件传递给子组件的 只读数据 ，遵循单向数据流原则。

• 通信方式

  子组件不能直接修改 props，需通过**事件发射（emit）**通知父组件更新数据。

模拟双向绑定的实现方案

Vue 提供 v-model 语法糖，通过约定式 props 和事件实现类似双向绑定的效果：

实现步骤

1. 父组件 通过 v-model 绑定数据到子组件
2. 子组件 接收默认名为 modelValue 的 props
3. 子组件 触发 update:modelValue 事件传递新值

父组件示例

<template>
  <MyInput v-model="inputValue" />
</template>

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

const inputValue = ref('');
</script>

子组件示例

<template>
  <input 
    :value="modelValue" 
    @input="handleInput"
  >
</template>

<script setup>
const props = defineProps({
  modelValue: String
});

const emit = defineEmits(['update:modelValue']);

const handleInput = (e) => {
  emit('update:modelValue', e.target.value);
};
</script>

总结：

在这个例子中，父组件的 inputValue 被绑定到了子组件的 v-model。在子组件中，我们接收了一个名为 modelValue 的 props，并在输入框的值改变时发射了一个 update:modelValue 事件。父组件监听这个事件并更新它的 inputValue。

尽管这不是真正的双向绑定，但它提供了一种在 Vue 组件之间模拟双向数据流动的有效方式。记住，props 应该是不可变的，子组件应该通过事件来与父组件通信。