【Vue】自定义组件绑定 v-model

一颗不甘坠落的流星

已于 2023-05-15 13:25:40 修改

阅读量4.2k

点赞数 2

分类专栏： Vue 全家桶文章标签： vue.js javascript 前端 components

于 2022-07-22 12:53:22 首次发布

本文链接：https://blog.csdn.net/qq_45677671/article/details/125929993

版权

Vue 全家桶专栏收录该内容

32 篇文章 49 订阅

订阅专栏

文章目录

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="message" />{{message}}
			<!-- v-model 相当于 v-bind 和 v-on -->
			<input type="text" v-bind:value="message" @input="change($event)" />{{message}}
			<!-- 
				不可以 直接在子组件上绑定 v-model ，想要实现该效果，
				必须在子组件的里面使用 $emit 去主动触发自定义事件 
			-->
			<child v-model="msg" :value="msg"></child>{{msg}}
		</div>
		<!-- 引入vue插件 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var child = {
				props: ['value'],
				template: `<div>
			                子组件
			                <input type="text" :value="value" @input="$emit('input',$event.target.value)"/>
			            </div>`
			}
			// 声明vue的对象
			var app = new Vue({
				el: "#app", // 将vue对象挂载到dom节点
				data: { // 定义vue对象的数据
					msg: "hello",
					message: "hi"
				},
				components: {
					child
				},
				methods: {
					change(ev) {
						this.message = ev.target.value;
					}
				}
			})
		</script>
	</body>
</html>