vue3.4版本的发布,defineModel也正式转正了。它可以简化父子组件之间的双向绑定,是目前官方推荐的双向绑定实现方式
一、v-model的原理
v-model只是一个语法糖,背后本质上包含2个操作
1、v-bind 绑定一个 value 属性
2、v-on 指令给当前元素绑定 input事件
就是给组件定义了 modelValue 属性 和 监听 update:modelValue 事件,并且在子组件内要更新 modelValue 值时需要 emit 出去一个 update:modelValue 事件,将新的值作为第二个字段传出去。
二、之前的代码实现
子组件
<template>
<input
:value="props.modelValue"
@input="emit('update:modelValue', $event.target.value)"
/>
</template>
<script setup lang="ts">
const props = defineProps(["modelValue"]);
const emit = defineEmits(["update:modelValue"]);
</script>
父组件
<template>
<CommonInput v-model="inputValue" />
</template>
<script setup lang="ts">
import { ref } from "vue";
const inputValue = ref();
</script>
单向数据流
从vue2开始就已经是单向数据流,在子组件中是不能直接修改props中的值。
由子组件中抛出一个事件,由父组件去监听这个事件,
然后去修改父组件中传递给props的变量。如果这里我们给input输入框直接加一个
v-model=“props.modelValue”,那么其实是在子组件内直接修改props中的modelValue。
由于单向数据流的原因,vue是不支持直接修改props的,所以我们才需要将代码写成上面的样子。
三、defineModel实现数据双向绑定
defineModel是一个宏,所以不需要从vue中import导入,直接使用就可以了。这个宏可以用来声明一个双向绑定 prop,通过父组件的 v-model 来使用。
子组件
<template>
<input v-model="mode

最低0.47元/天 解锁文章

被折叠的 条评论
为什么被折叠?



