在组件外调用组件方法

Question

我是 Vue.js 的新手，我可能会以错误的方式思考这个问题，在这种情况下，我非常感谢您的帮助。

我有一个组件定义如下：

Vue.component('btn', {

data() {

    return {
        active: false
    };

},

props: ['type', 'msg'],

template: "<button class='btn__{{ type }}'><div class='la-ball-scale-multiple' v-show='active'><div></div><div></div><div></div></div>{{ msg }}</button>",


methods: { 

    start: function() {
        this.active = true;

    },

    stop: function() {
        this.active = false;
    }

}
});

我可以在任何文档上多次添加 btn 组件，如下所示：

<btn type="primary" msg="Submit" @click="test"></btn>

当我点击它时，它应该执行 test 中定义的任何操作，它在根 vue 实例中作为方法。

但是，我想调用组件的方法，从测试方法开始。我还希望能够在我完成测试内部的代码逻辑后调用组件的停止方法。

我不认为将方法公开为组件中的事件，然后调用 this.$broadcast 是一种解决方案，因为如果我有两个组件，则在此解决方案中它们似乎都将 active 设置为 true。

有什么帮助吗？

Answer 1

您可以将test 函数作为prop（例如称为onclick）传递，然后将btn 组件的上下文作为参数传递给test 函数。这样，您就可以访问start 和stop。

测试：

test: function(e, btn) {
   btn.start();
   // ...
   btn.stop();
}

btn：

Vue.component('btn', {

data() {

    return {
        active: false
    };

},

props: ['type', 'msg', 'onclick'],

template: "<button class='btn__{{ type }}' @click="btnClick($event)"><div class='la-ball-scale-multiple' v-show='active'><div></div><div></div><div></div></div>{{ msg }}</button>",


methods: { 

    start: function() {
        this.active = true;

    },

    stop: function() {
        this.active = false;
    },

    btnClick: function(e) {
       this.onclick(e, this); // call your onclick handler in the context of this component
    },

}
});

自定义元素：

<btn type="primary" msg="Submit" :onclick="test"></btn>

看看 JSFiddle：

https://jsfiddle.net/2a5os24x/6/