在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);

现在我得到了这个$调度不是一个功能错误消息。我做错了什么？如何在各种子组件中使用父函数？我还尝试了$emit，它没有抛出错误

提前感谢您的帮助！

Answer 1

// 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";
  },
}

Answer 2

你有几个选择。

选项1-引用$父从子

最简单的方法是使用this$父级来自子组件。大概是这样的：

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

为了跟进您的评论，以下是将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>