Question

在VueJS文件中，我有两个组件：

var firstComponent = Vue.extend({
     template: '#component1',
     [...]
     methods:
          comp1function: function() {
          [...]
          comp2function()
          }
     [...]
}),
var secondComponent = Vue.extend({
     template: '#component2',
     [...]
     methods:
          comp2function: function(){
               do things here
          }
     [...]
})

所以我想做的就是说：当你完成comp1function时做comp2function。那么有什么办法可以在我的模板component1中使用我的模板component2引用一个函数吗？

Answer 1

您应该使用Vue Events。我假设您正在使用VueJS 1.x？

所以，让我们假设你有两个组成部分，如你在问题中所述：

var firstComponent = Vue.extend({
    template: '#component1',
    methods: {
        doSomething () {
            // Do things here
            console.log('I do things')
            // Fire an event when you want:
            this.$dispatch('some-event')
        }
    }
})

var secondComponent = Vue.extend({
    template: '#component2',
    methods: {
        doSomethingElse () {
            console.log('I do something else')
        }
    },
    events: {
        trigger () {
            this.doSomethingElse()
        }
    }
})

您需要使用$dispatch方法从第一个组件触发事件。然后，在您的Vue实例中，您需要获取该事件，并使用$broadcast向其他Vue孩子广播新事件：

new Vue({
    el: '#app',
    components: {
        firstComponent,
        secondComponent
    },
    events: {
        'some-event' () {
            this.$broadcast('trigger')
        }
    }
})

然后，您就可以在secondComponent中获取该事件并触发您想要的任何方法

您可以在此页面上详细了解自定义活动：http://v1.vuejs.org/guide/components.html#Parent-Child-Communication

另一个参考组件

1 个答案: