Question

我有一个带有一个方法的组件，我正在创建它。它正在使用vue-select，但此组件的用途与我的问题无关。

<template>
    <v-select :on-change="onchangecallback"></v-select>
</template>

<script>
    import Vue from 'vue'
    import vSelect from 'vue-select'

    Vue.component('v-select', vSelect);

    export default {
        methods: {
            onchangecallback: () => {alert('default')}
        },
        created: function() {
            this.onchangecallback();
        }
    }
</script>

在其他文件中，我正在导入此组件并使用Vue构造函数创建它的新实例并传递新的onchangecallback方法，根据我的理解，该方法应覆盖默认的onchangecallback方法：< / p>

import VSelect from './components/ui/VSelect.vue';

new Vue({
    VSelect,
    el:         '#app',
    components: {VSelect},
    template:   `<v-select />`,
    methods:    {
        onchangecallback: () => {alert('custom')} // doesn't work
    }
});

但是当我启动应用时，我仍然会alert('custom')而不是alert('default')。

Answer 1

我不知道你想要达到的目的。

但这是我的解决方案https://codesandbox.io/s/84qw9z13v9

您需要定义一个道具，将新的回调函数传递给该组件（通过道具）

@Element(name = "link", required = false)
@Path("channel")
private String link;

使用它而不是默认值。

检查该代码段中的所有代码。

Answer 2

对于组件之间的通信，您应该使用事件。发出子组件中的事件并使父组件听取它：

在子组件中：

created() {
    this.$emit('change')
}

在父组件中：

模板：

<child-component v-on:change="doSomething" />

方法：

methods: {
    doSomething() {
        // ...
    }
}

解释

在子组件中，无论何时发生更改，您都会发出事件，在本例中为“更改”。在你的情况下，这是在创建组件时。

在父组件中，告诉Vue，只要子组件发出“更改”事件，它就应该在父组件中运行“doSomething”方法。

这在许多地方使用，即输入，输入在内容发生变化时发出事件“输入”，任何父母都可以使用v-on:input="methodHere"来监听。

无法覆盖Vue构造函数中的方法

2 个答案:

解释