vue组件事件配合v-model--逆向传递数据

需求：子组件input内容发生变化时，父级组件获取数据显示输入的内容

实例：

父级组件：

<template>
	<h3>{{title}}</h3>
	<ComponentC @search="setData" />
</template>

<script>
	import ComponentC from './componentC.vue'
	export default {
		data() {
			return {
				title:'props数据类型',
			}
		},
		methods: {
			setData(data){
				this.title=data;
			}
		},
		components: {
		    // 局部注册组件
			ComponentC
		  }
	}
</script>

子组件：

<template>
	搜索：<input type="text" v-model="msgData" />
</template>

<script>
	export default{
		data(){
			return{
				msgData:''
			}
		},
		watch:{
			msgData(newVal,oldVal){
				this.$emit('search',newVal);
			}
		},
		methods:{
			sendMsg(){
				//通过change事件也能实现上面的效果
				this.$emit('search',this.msg);
			}
		}
	}
</script>

欢迎转载，转载需注明地址： http://www.luowebs.com/Skill_desc/158/1079.html

很赞哦！ (0)