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

あなたには2つのオプションがあります。

オプション1 - 子供から参照$親

最も簡単なあなたの子コンポーネントから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 - 中央イベントバス

あなたのコンポーネントが直接の親子関係を持っていない場合は、1つの最後のオプションは、中心として独立した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>