vue3 ＜script setup＞语法糖中定义v-model属性

原创于 2021-11-11 10:49:17 发布 · 4.4k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#setup #vue3 #v-model

vue3 专栏收录该内容

21 篇文章

订阅专栏

本文介绍了在 Vue3 的 `<script setup>` 语法糖中如何定义并使用 `v-model` 属性来实现自定义组件的数据双向绑定。示例展示了如何在 CustomComp 组件中定义 `props` 和 `emits`，并通过定时器更新 `infos` 值。在父组件中，我们导入 CustomComp 并使用 `v-model` 与自定义组件进行交互，展示了一个简单的数据传递和更新过程。

vue3 `<script setup>`语法糖中定义v-model属性

自定义组件

CustomComp.vue

<template>
	<div>{{infos}}
	</div>
</template>

<script setup>
	const props = defineProps(['infos'])
	const emits = defineEmits(['update:infos'])
	setTimeout(() => {
		emits('update:infos', 'hello v-model')
	}, 2000)

</script>

使用自定义组件

<template>
	<div>
		<custom-comp v-model:infos="infos"></bars>
	</div>
</template>

<script setup>
	import {ref} from 'vue'
	import CustomComp from './CustomComp.vue'
	let infos = ref('hello custom-comp')
<script>