Question

我在名为setMessage()的父组件中初始化了一个方法，我希望能够在子组件中调用它。

main.js

const messageBoard = new Vue({
    el: '#message-board',
    render: h => h(App),
})

App（App.vue（parent））..

export default {
    data() {
        return { messages: state }
    },
    methods: {
        setMessage(message) {
            console.log(message);
        }
    },
    template: `
        <div>
            <child-component></child-component>
        </div>
    `,
}

子

const child = Vue.extend({
    mounted() {
        // attempting to use this function from the parent
        this.$dispatch('setMessage', 'HEY THIS IS MY MESSAGE!');
    }
});
Vue.component('child-component', child);

现在我收到this.$dispatch is not a function错误消息。我究竟做错了什么？如何在各种子组件中使用父函数？我还试过$emit，它没有抛出错误＆amp;它没有达到这个功能。

提前感谢您的帮助！

Answer 1

你有几个选择。

选项1 - 引用来自孩子的$ parent

最简单的方法是使用子组件中的this.$parent。像这样：

const Child = Vue.extend({
  mounted() {
    this.$parent.setMessage("child component mounted");
  }
})

选项2 - 在父级

中发出事件和处理

但这强烈地将孩子与其父母联系在一起。要解决此问题，您可以$emit孩子中的事件并让父母处理它。像这样：

const ChildComponent = Vue.extend({
  mounted() {
    this.$emit("message", "child component mounted (emitted)");
  }
})

// in the parent component template
<child-component @message="setMessage"></child-component>

选项3 - 中央事件总线

如果您的组件没有直接的父子关系，最后一个选项是使用单独的Vue实例作为中央事件总线as described in the Guide。它看起来像这样：

const bus = new Vue({});

const ChildComponent = Vue.extend({
  mounted() {
    bus.$emit("message-bus", "child component mounted (on the bus)");
  }
})

const app = new Vue({
  ...
  methods: {
    setMessage(message) {
      console.log(message);
    }
  }, 
  created() {
    bus.$on('message-bus', this.setMessage)
  },
  destroyed() {
    bus.$off('message-bus', this.setMessage)
  }
});

更新（选项2a） - 将setMessage作为道具传递

要跟进您的评论，以下是将setMessage作为道具传递给子组件的方法：

const ChildComponent = Vue.extend({
  props: ["messageHandler"],
  mounted() {
    this.messageHandler('from message handler'); 
  }
})

// parent template (note the naming of the prop)
<child-component :message-handler="setMessage"></child-component>

Answer 2

 // parent component providing 'foo'
        var Provider = {
            methods: {
                foo() {
                    console.log('foo')
                },
            },
            provide: {
                foo: this.foo,
            },
        }

        // child component injecting 'foo'
        var Child = {
            inject: ['foo'],
            created() {
                this.foo() // => "foo"
            },
        }

在vue js中使用父函数的子组件

2 个答案: