vue3的组件间的v-model参数

茶茶只知道学习

于 2024-03-12 00:41:34 发布

阅读量563

点赞数 7

分类专栏： vue2、vue3的教程文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/qq_57423665/article/details/136638847

版权

vue2、vue3的教程专栏收录该内容

18 篇文章

订阅专栏

本文介绍了如何在Vue组件中使用v-model参数进行数据双向绑定，以及如何创建并应用自定义修饰符如capitalize来改变绑定值的格式。通过实例展示了父子组件之间的交互和组件内部处理v-model的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

v-model 参数

默认情况下，组件上的 v-model 使用 title作为 prop 和 update:title作为事件。我们可以通过向 v-model 传递参数来修改这些名称：

           zizhi是我自己创建的组件
<zizhi v-model:title="modelValue"></zizhi>

如何让父组件和子组件的数据进行双向绑定呢？

示例：

<!-- 父组件 -->

<template>
	<view class="container">
		<view class="zhis">new:{{modelValue}}</view>
		<button type="default" @click="changeto">heihito</button>
        <!-- 父组件之中，用v-model参数向子组件传递数据 -->
		<zizhi v-model:title="modelValue"></zizhi>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				modelValue: 0
			}
		},
		methods: {
			changeto() {
				this.modelValue += 1
			}
		}
	}
</script>

子组件：

<template>
	<view>
		<view class="az">
			子组件：{{title}}
		</view>
		<button type="default" @click="changeto1">heihi</button>
	</view>
</template>

<script>
	export default {
		name: "zizhi",
		emits: ['update:title'],
		props: {
			title: Number
		},
		data() {
			return {

			};
		},
		methods: {
			changeto1() {
                <!-- 当子组件中的值发生改变时，把新值传递给父组件 -->
				this.$emit('update:title', this.title + 1)
			}
		}
	}
</script>

处理 v-model 修饰符

让我们创建一个示例自定义修饰符 capitalize，它将 v-model 绑定提供的字符串的第一个字母大写。

添加到组件 v-model 的修饰符将通过 modelModifiers prop 提供给组件。在下面的示例中，我们创建了一个组件，其中包含默认为空对象的 modelModifiers prop。

请注意，当组件的 created 生命周期钩子触发时，modelModifiers prop 包含 capitalize，其值为 true——因为它被设置在 v-model 绑定 v-model.capitalize="bar"。

<!-- 我是父组件 -->
<template>
	<view class="container">
		<zizhi v-model:title.cap="modelValue"></zizhi>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				modelValue: 'azxvd'
			}
		}
	}
</script>

子组件：

	<!-- 我是 synA子组件-->
<template>
	<view>
		<view class="az">
			子组件：{{title}}
		</view>
		<input type="text" :value="title" @input="emitValue" style="border: red solid 1px;">
	</view>
</template>

<script>
	export default {
		name: "zizhi",
		emits: ['update:title'],
		props: {
			title: String,
			titleModifiers: {
				default: () => ({})
			}
		},
		created() {
			console.log(this.titleModifiers) // { capitalize: true }
		},
		data() {
			return {};
		},
		methods: {
			emitValue(e) {
				let value = e.detail.value
				if (this.titleModifiers.cap) {
					value = value.charAt(0).toUpperCase() + value.slice(1)
				}
				//charAt() 方法可返回指定位置的字符
				//toUpperCase() 方法用于把字符串转换为大写
				//slice() 方法可从已有的数组中返回选定的元素
				console.log("value: ", value);
				this.$emit('update:title', value)
			}
		}
	}
</script>