//child
setup(){
// get the current instance
const instance = getCurrentInstance();
// function to find the parent instance
const getParentComponent = (name: string) => {
let component = null;
if (instance) {
let parent = instance.parent;
while (parent && !component) {
if (parent.type.name === name) {
component = parent;
}
parent = parent.parent;
}
return component;
} else {
return null;
}
};
// listener that will be called from within the parent component
const eventFunction = () => {
console.log('event fired !!')
}
onMounted(() => {
const $parent = getParentComponent('ParentComponentName');
// register the current instance to the parent component
if($parent && $parent.props && $parent.props.childInstances){
($parent.props.childInstances as any[]).push(instance)
}
})
return {
eventFunction
}
}
import event from './event';
//mounted or any methods
even.on('GG', data=> console.log(`GG Event received ${data}`))
//显然,您必须从另一个组件发出该信号//...
import event from './event';
//on mounted or methods click or...
even.emit('GG', {msg:"Vue3 is super Cool"});
如果你使用的是<script setup>,这意味着所有的变量和方法都默认暴露给模板。
//in main.js
import event from './event.js';
//..
app.config.globalProperties.$event = event;
//..
//note if you have an error make sure that you split the the app chaining, like this :
let app = createApp(App);
app.config.globalProperties.$event = event;
app.mount('#app');
5条答案
按热度按时间aiazj4mn1#
可以使用
Refs
访问子方法https://v3.vuejs.org/guide/composition-api-template-refs.html
s4chpxco2#
您不会从子组件侦听父事件,而是将一个prop向下传递给子组件,如果子组件需要更新数据,您将从子组件向父组件发出一个事件以更新状态。
只读生命周期:上级〉 prop 〉下级
读取/更新生命周期:父项〉属性〉子项〉发射〉父项〉更新〉子项更新
klsxnrf13#
我提出了一种从父组件向子组件发送事件的方法。请注意,这是一种非常丑陋的变通方法!!
rjzwgtxy4#
如果你像我一样在Vue 2中的
this.$root.$on(...)
和this.$root.$emit(...)
上调用一些事件,从任何父/子到任何子/父,以某种方式保持你的代码更干净,而不是分别使用一堆发射和 prop ,让你的代码爆炸。从Vue 3 doc,事件总线模式可以通过使用实现事件发射器接口的外部库来替换。使用实现pub-sub模式的库或编写它。Vue 3事件描述
现在,如果您使用Option-API(如vue 2),您需要导入该事件文件,然后在任何组件中使用它。
如果你使用的是
<script setup>
,你需要添加额外的步骤,以便你的事件库这里的代码。下面是pub-sub javascript模式的一个基本示例,不要忘记添加off方法并在
beforeUnmounted
(v3)和beforeDestroy
(v2)上调用它,以便每个挂载的调用不执行多个函数)如果您正在执行vue 2,则语法为Option-API://in vue组件
//显然,您必须从另一个组件发出该信号//...
如果你使用的是
<script setup>
,这意味着所有的变量和方法都默认暴露给模板。//添加名为useEvent.js的文件
//在
<script setup>
中使用它fivyi3re5#
您可以通过使用作用域插槽来实现这一点。
例如,在"开槽"元件的父元件中:
Parent.vue
:在
Grandparent.vue
组件中,我们可以将一些方法触发事件的范围限定为父组件的Child.vue
组件,如下所示:GrandParent.vue
:#default
更改为您的插槽名称,如果没有名称,则保留默认值。然后在Child.vue组件中,我们确保向上发射事件:
Child.vue
: