Vue.js 在组件外部调用组件方法

我是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;
    }

}
});

Vue.component（'btn'{
数据（）{
返回{
活动：错误
};
},
道具：['type'，'msg']，
模板：“{{msg}}”，
方法：{
开始：函数（）{
this.active=true；
},
停止：函数（）{
this.active=false；
}
}
});

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

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

当我单击它时，它应该执行test中定义的任何操作，test作为一种方法存在于根vue实例中

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

我不认为在组件内将方法公开为事件，然后调用它。$broadcast是一种解决方案，因为如果我有两个组件，那么使用此解决方案，这两个组件似乎都将active设置为true

---

需要帮忙吗

您可以将

test

函数作为道具传递（例如称为

onclick

），然后将

btn

组件的上下文作为参数传递给

test

函数。这样，您就可以访问

start

和

stop

测试：

btn:

Vue.component（'btn'{
数据（）{
返回{
活动：错误
};
},
道具：['type'，'msg'，'onclick']，
模板：“{{msg}}”，
方法：{
开始：函数（）{
this.active=true；
},
停止：函数（）{
this.active=false；
},
单击：函数（e）{
this.onclick（e，this）；//在此组件的上下文中调用onclick处理程序
},
}
});

自定义元素：

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

看看JSFIDLE：

---

出于某种原因，我收到了以下错误消息：“Uncaught TypeError:this.start不是函数”。你有小提琴吗？是的，我最初的假设是错误的。看起来vue将其所有函数预绑定到当前实例。看一下最新的答案，是这样的。再次感谢：）很高兴我能提供帮助，同时了解vue的一些新知识：）

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>