vue组件事件(也叫自定义事件)--逆向传递数据

vue组件事件--逆向传递数据

在组件的模板表达式中，可以直接使用$emit方法触发自定义事件

触发自定义事件的目的就是为了组件之间的数据传递

案例：

<template>
	<ComponentB @getChid="getData"/>
	<h3>{{title}}</h3>
</template>

<script>
	import ComponentB from './componentB.vue'
	export default {
		data() {
			return {
				title:'props数据类型',
			}
		},
		methods: {
			getData(data){
				this.title=data; //这里的data就是子组件传过来的数据
			}
		},
		components: {
		    // 局部注册组件
			ComponentB
		  }
	}
</script>

通过$emit实现子组件相父组件传递数据:

<template>
	<button @click="setData">点击修改父组件内容</button>
</template>

<script>
	export default{
		methods:{
			setData(){
				//$emit 两个参数 
				//第一个参数是父组件自定义事件的名称  
				//第二个参数是要传给父组件的数据 支持多种数据类型 
				this.$emit('getChid','数据修改了');
			}
		}
	}
</script>

欢迎转载，转载需注明地址： http://www.luowebs.com/Tachzation_desc/129/1078.html

很赞哦！ (0)