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中定义的任何内容，它在root vue实例中作为方法。

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

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

请帮忙吗？

Answer 1

您可以将test函数作为道具传递（例如，称为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/

在组件外调用组件方法

1 个答案: