强迫学习的东西是不会保存在心里的。——《柏拉图论教育》
首先我们在子组件中这样定义
代码语言:javascript复制<template>
<div>
<el-button @click="callSuper">123</el-button>
</div>
</template>
<script>
export default {
methods: {
callSuper() {
this.$emit('parentEvent', '我的');
}
}
};
</script>
这里的组件就只有一个el-button
,点击后执行callSuper
函数
里面这行this.$emit('parentEvent', '我的');
表示
调用在父组件 引用子组件时 传入的事件
例如我这里调用了parentEvent
,传入了个“我的”作为参数
然后这样我们在 引用子组件 的时候就需要这样写
代码语言:javascript复制<template>
<div>
<hello-world @parentEvent="toYoung"></hello-world>
</div>
</template>
<script>
import HelloWorld from '../../../components/HelloWorld.vue';
export default {
components: { HelloWorld },
methods: {
toYoung(msg) {
console.log(msg);
}
}
};
</script>
这里定义@parentEvent
事件,然后传入toYoung
函数作为参数
这样就实现了子组件点击时触发父组件方法