我正在使用Vue.Js v2。我想在component 2->c2method中调用component 1-> c1 method,以便在提交后重新加载数据。
Vue.component('component1', {
methods: {
c1method: function(){
alert('this is c1method')
},
}
})
Vue.component('component2', {
methods: {
c2method: function(){
component('component1').c1method()//like this
},
}
})
7条答案
按热度按时间zed5wv101#
对于非父-子关系,则此与此相同。调用一个方法,显然是从任何其他组件调用组件的任何方法。只需向
$root
示例添加一个$on
函数,并从任何其他访问$root
并调用$emit
函数的组件调用。第一个组件
在第二个组件中调用
$root
中的$emit
函数它的作用更像一个插座。参考此处
https://stackoverflow.com/a/50343039/6090215
5n0oy7gb2#
j8yoct9x3#
不需要黑客解决方案。
在vuejs中,我们可以创建可以被全球监听的事件。
有了这个特性,每当我们想调用我们心爱的函数时,我们就发出这个事件。
现在,我们只需要一直从组件中监听这个事件。每当这个全局事件发生时,我们就可以执行我们想要调用的方法。
很简单
1.在创建vue示例之前,你转到main.js,这样写:
1.在任何我们想要激发目标函数的地方,我们都不激发它,我们只发出这个事件:
1.现在,在我们的组件中,有目标函数,我们总是监听这个事件:
不要忘记在top中导入eventBus。
就是这样,几行代码,没有黑客,所有vuejs的力量。
dm7nw8vv4#
医生们解决了这种情况
https://v2.vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication
如果组件具有相同的父组件,则可以发出父组件侦听的事件。然后设置了
ref
属性,就可以从父级调用c1method
。https://v2.vuejs.org/v2/guide/components.html#Child-Component-Refs
92vpleto5#
试试这个
hgncfbus6#
如果有人在Vue.js v3中寻找解决方案:
https://v3-migration.vuejs.org/breaking-changes/events-api.html#event-bus
https://github.com/developit/mitt#install
qcbq4gxm7#
我在这个SO问题中找到了Vue 3的一个很好的解决方案,并回答https://stackoverflow.com/a/72348802/18091372
它使用Vue3的defineExpose函数使内部函数在组件外部可用。
如果在
ComponentA
中有这样的结构其中
ComponentB
具有:那么,
ComponentA
可以做:和
hello
将被记录到控制台。