Vue3+TS项目中v-model语法糖使用

原创已于 2023-08-02 10:28:33 修改 · 708 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #typescript

于 2023-08-02 10:11:12 首次发布

Vue3 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了在Vue3中如何使用v-model简化父子组件间的值传递，通过defineProps接收父组件传来的值，并利用emit进行双向数据更新。

vue3 中 `v-model` 语法糖

Vue3中父组件给子组件传值，子组件用defineProps接收；子组件更改父组件传的值，通过emit向父组件传值
Vue3中只需要 v-model 指令可以支持多个数据在父子组件同步，不再支持 .sync 语法
v-model="count"等价于:modelValue="count" @update:modelValue="count=$event"

直接上案例：

//父组件------------------------------------
<script setup lang="ts">
	import { ref } from 'vue'
	import ChildOne from '@/components/ChildOne.vue'
	const money = ref(10)
	const name = ref('小明')
</script>

<template>
 <!-- 原始写法 -->
  <!-- <child-one
    :model-value="money"
    @update:model-value="money = $event"
  ></child-one> -->
  
  <!-- 使用v-model语法糖简化写法 -->
 	 <child-one v-model="money" v-model:name="name"></child-one>
</template>

<style scoped></style>

//子组件--------------------------------
<script setup lang="ts">
	defineProps<{
	  modelValue: number
	  name: string
	}>()

	// 子组件更改父组件的值
	const emit = defineEmits<{
	  (e: 'update:modelValue', money: number): void
	  (e: 'update:name', name: string): void
	}>()
</script>

<template>
  <div>
    <p>钱包{{ modelValue }}</p>
    <button @click="emit('update:modelValue', modelValue + 1)">点击加一</button>
    <p>姓名:{{ name }}</p>
    <button @click="emit('update:name', '更改的姓名')">更改姓名</button>
  </div>
</template>

<style scoped></style>