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

最新推荐文章于 2024-06-05 15:31:49 发布

bdawn

最新推荐文章于 2024-06-05 15:31:49 发布

阅读量4.2k

点赞数 1

分类专栏： vue3 文章标签： setup vue3 v-model

本文链接：https://blog.csdn.net/BDawn/article/details/121263265

版权

vue3 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

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

摘要由CSDN通过智能技术生成

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>