vue子组件向父组件传值----$emit
子组件向父组件传值可以使用 $emit() 我的理解是子组件通过$emit方法把自己的第一个参数eventName传递给父级,父级把eventName当成一个事件,触发这个事件接收子级传给自己的数据或执行操作$emit ( eventName,args..)参数eventName(必传参数): 传递到父级的时间名参数args(可选参数): 传递到父级数据(可以传字符串、数组、对...
·
子组件向父组件传值可以使用 $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了
差不多就这样了,有问题在补充~~~~~
更多推荐
已为社区贡献1条内容
所有评论(0)