文章目录

  • 示例:
<!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>
  • 运行结果:

在这里插入图片描述

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐