Vue3.0更新版本Vue3.4:defineModel用法

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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值