个人社保缴费app下载_软件开发设计文档示例_常见的推广方式_什么是seo优化推广

深入了解V-model实现数据双向绑定

父组件实现双向绑定

在父组件中使用 v-model：

<ChildComponent v-model="message" />

等价于：

<ChildComponent :modelValue="message" @update:modelValue="val => message = val" />

1. :modelValue：通过 props 将 message 的值传递给子组件。
2. @update:modelValue：通过 emit 向父组件发送更新值。

子组件实现双向绑定

为了支持父组件的 v-model，子组件需要：

1. 定义 props，接收父组件传递的数据。
2. 使用 emit 发送更新事件。

<script setup>
import { defineProps, defineEmits } from 'vue';// 接收父组件传递的 modelValue
defineProps({modelValue: String, // 父组件传递的值
});// 定义更新事件
defineEmits(['update:modelValue']);const updateValue = (newValue) => {// 触发事件，通知父组件更新数据emit('update:modelValue', newValue);
};
</script><template><input :value="modelValue" @input="updateValue($event.target.value)" />
</template>

defineModel()

从 Vue 3.4 开始，推荐的实现方式是使用 defineModel()宏

<!-- Child.vue -->
<script setup>
const model = defineModel()function update() {model.value++
}
</script><template><div>Parent bound v-model is: {{ model }}</div><button @click="update">Increment</button>
</template>

父组件可以用 v-model 绑定一个值：

template

<!-- Parent.vue -->
<Child v-model="countModel" />

defineModel() 返回的值是一个 ref。它可以像其他 ref 一样被访问以及修改，不过它能起到在父组件和当前变量之间的双向绑定的作用：

• 它的 .value 和父组件的 v-model 的值同步；
• 当它被子组件变更了，会触发父组件绑定的值一起更新。

这意味着你也可以用 v-model 把这个 ref 绑定到一个原生 input 元素上，在提供相同的 v-model 用法的同时轻松包装原生 input 元素：

<script setup>
const model = defineModel()
</script><template><input v-model="model" />
</template>

底层机制

defineModel 是一个便利宏。编译器将其展开为以下内容：

• 一个名为 modelValue 的 prop，本地 ref 的值与其同步；
• 一个名为 update:modelValue 的事件，当本地 ref 的值发生变更时触发。