Javascript 如何处理动态装入的组件的事件？

我有一个组件定义为：

计算器.vue

...

导出默认值{
数据：函数（）{
返回{
值：0，
};
},
方法：{
...
插入（）{
此.$emit（'insert'，编号（this.value））
},
},
};

现在我有了另一个组件，它可以为

弹出窗口

充气，其中包含我的

计算器

组件

Main.vue

...

从“../../ui/Calculator.vue”导入计算器；
导出默认值{
数据：函数（）{
返回{}；
},
方法：{
openCalculator（）{
此.$popup（“追加”{
组件：计算器，
});
},
},
};

弹出组件只是第三方组件，其作用类似于组件包装器。因此，我需要将其始终包含在我的App.vue中：

从“Vue”导入Vue；
从“ciao vue popup”导入CiaoVue popup；
Vue.use（CiaoVuePopup）；
导出默认值{
名称：“应用程序”，
...
};

如何从我的

Main

组件处理膨胀的

计算器的
'insert'
事件？
使用
v-on=“$listeners”
实际上我建议使用Vuex。但如果没有，这里是你如何做到这一点

在中间的组件
弹出窗口中
，从其子组件
计算器
捕获事件。如果它是一个动态组件，那么它也可以工作。不要对事件执行任何操作，除非将其冒泡到
Main
。这就是
v-on=“$listeners”
所做的：



然后在
Main
中，创建侦听器，就像
Calculator
是它的直接子对象一样，并将其放置在中间的组件
弹出窗口
：



方法：{
插入（）{
console.log（“Woo插入”）；
}
}

它之所以能工作，是因为
弹出窗口中的
$listeners
从其父级
Main
获取所有侦听器，并将它们应用于其子级
Calculator
，就好像中间的组件没有碍事一样。您可以在所有中间组件上使用
v-on=“$listeners”
链接多个中间组件

下面是一个演示：


Vue.component（'Calculator'{
模板：`
计算器：
插入
`,
数据：函数（）{
返回{
价值：1000，
};
},
方法：{
插入（）{
此.$emit（'insert'，编号（this.value））
},
}
})
Vue.component（'弹出窗口'{
模板：`
弹出窗口：
`,
数据（）{
返回{
comp:‘计算器’
}
}
});
/*****应用程序*****/
新Vue({
el:“应用程序”，
数据（）{
返回{
someEventData:null
}
},
方法：{
插入（事件数据）{
this.someEventData=eventData；
}
}
});
.calc、.popup{
填充：24px；
}
.计算{
背景：#dddddd；
}
.弹出窗口{
背景：#FF99FF；
}

根
来自孙子（计算器）：{someEventData}
使用
v-on=“$listeners”
实际上我建议使用Vuex。但如果没有，这里是你如何做到这一点

在中间的组件
弹出窗口中
，从其子组件
计算器
捕获事件。如果它是一个动态组件，那么它也可以工作。不要对事件执行任何操作，除非将其冒泡到
Main
。这就是
v-on=“$listeners”
所做的：



然后在
Main
中，创建侦听器，就像
Calculator
是它的直接子对象一样，并将其放置在中间的组件
弹出窗口
：



方法：{
插入（）{
console.log（“Woo插入”）；
}
}

它之所以能工作，是因为
弹出窗口中的
$listeners
从其父级
Main
获取所有侦听器，并将它们应用于其子级
Calculator
，就好像中间的组件没有碍事一样。您可以在所有中间组件上使用
v-on=“$listeners”
链接多个中间组件

下面是一个演示：


Vue.component（'Calculator'{
模板：`
计算器：
插入
`,
数据：函数（）{
返回{
价值：1000，
};
},
方法：{
插入（）{
此.$emit（'insert'，编号（this.value））
},
}
})
Vue.component（'弹出窗口'{
模板：`
弹出窗口：
`,
数据（）{
返回{
comp:‘计算器’
}
}
});
/*****应用程序*****/
新Vue({
el:“应用程序”，
数据（）{
返回{
someEventData:null
}
},
方法：{
插入（事件数据）{
this.someEventData=eventData；
}
}
});
.calc、.popup{
填充：24px；
}
.计算{
背景：#dddddd；
}
.弹出窗口{
背景：#FF99FF；
}

根
来自孙子（计算器）：{someEventData}
谢谢，正如您所建议的，我最终使用Vuex来解决问题。不客气，这可能是一个不错的选择。在大多数情况下，Vuex是一种更好的模式。我想这对于非常密切相关的组件来说是很好的。谢谢，正如你所建议的，我最终使用Vuex来处理这个问题。不客气，这可能是一个不错的选择。在大多数情况下，Vuex是一种更好的模式。我想这对于非常密切相关的组件来说是很好的。