vue子组件向父组件传值----$emit

子组件向父组件传值可以使用  $emit()  

我的理解是子组件通过$emit方法把自己的第一个参数eventName传递给父级,父级把eventName当成一个事件,触发这个事件接收子级传给自己的数据或执行操作

$emit ( eventName,args..)

参数eventName(必传参数): 传递到父级的时间名

参数args(可选参数): 传递到父级数据(可以传字符串、数组、对象、函数,我感觉啥都能传)

注:1.args是一个参数列表,可以传好多参数;

   2.一个子组件可以用多个$emit 

例一是不传args的情况,例二是传多个args的情况

例1:

子级代码 (child.vue)

<!-- 子组件 -->
<template>
	<div id="child" @click="$emit(sendparent)"></div>
</template>

<script>
    export default {
	name: 'menuLeft',
	data (){
		return {
			
		}
	},
	methods: {
		
	},

}
</script>

父级代码 (parent.vue)

<!-- 父组件 -->
<template>
  <div id="parent">
    <menu-left @sendparent="helloFn"></menu-left>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    helloFn: function () {
      alert("hello world");
    },
  },
  created() {

  }
}
</script>


例2:

<!-- 子组件 -->
<template>
	<div id="child" @click="$emit(sendparent,'hello',function(){return 'world'})"></div>
</template>

<script>
    export default {
	name: 'menuLeft',
	data (){
		return {
			
		}
	},
	methods: {
		
	},

}
</script>
<!-- 父组件 -->
<template>
  <div id="parent">
    <menu-left @sendparent="helloFn"></menu-left>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    helloFn: function (param1,param2) {
      alert("hello world");
      alert(param2());
    },
  },
  created() {

  }
}
</script>


如果想在方法中调用$emit的话,写成this.$emit()就OK了

差不多就这样了,有问题在补充~~~~~

©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页