xxxxxxxxxx
Vue.component('component1', {
methods: {
c1method: function(){
alert('this is c1method')
},
}
})
Vue.component('component2', {
methods: {
c2method: function(){
component('component1').c1method()//like this
},
}
})
xxxxxxxxxx
.
mounted() {
this.$root.$on('component1', () => {
// your code goes here
this.c1method()
}
}
xxxxxxxxxx
// Register plugin to provide $externalMethods for components
app.use({
methods: {},
install(app) {
app.config.globalProperties.$externalMethods = {
set: (method, func) => this.methods[method] = func,
call: (method, args) => this.methods[method](args)
}
}
});
app.component('button1', {
template: '#test-button',
methods: {
click(event, text) {
console.log(text || 'Button 1 default click')
}
},
mounted: function () {
console.log(this);
// Register global function
this.$externalMethods.set('button1/click()', this.click)
}
});
app.component('button2', {
template: '#test-button',
methods: {
click(event) {
// Call global function
this.$externalMethods.call('button1/click()', event, 'Hello from Button 2')
}
}
});