子组件向父组件传值可以使用 $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了
差不多就这样了，有问题在补充～～～～～