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

Question

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

main.js

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

App(App.vue(父母))..

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,它不会抛出错误而且它没有击中函数.

提前谢谢你的帮助!

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实例作为指南中描述的中央事件总线.它看起来像这样:

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作为prop传递

要跟进您的评论,以下是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>