小道具の最初のタイプ
親コンポーネントは：（v-bindの略）を使用して渡し、子コンポーネントは小道具を使用して受信し、タイプが示されます
コード例
親コンポーネントコード：
<template>
<TodoHeader :addTodo="addTodo"/>
</template>
サブコンポーネントコード：
export default{
props:{
addTodo：Function
}
}
2番目のカスタムイベント
親コンポーネントは@（v-onの略）を使用してイベントをバインドし、子コンポーネント（メソッド内）はvueインスタンスメソッド$ emit（ "イベント名"、パラメーター）を使用して受信します
コード例
親コンポーネントコード：
<TodoHeader @addTodo="addTodo"/> //绑定事件监听
サブコンポーネントコード：
methods:{
// 触发事件
this.$emit("addTodo",todo); //将方法addTodo(todo) 的拆分 addTodo为方法名 todo为方法的参数
}
this。$ emit（ "メソッド名"、メソッドのパラメーター）
3番目のref \ refs
親コンポーネントはrefを使用して子コンポーネントの情報を登録し、vueインスタンスメソッドrefs.refを書き込みます。$ on（ "イベント名"、コールバック関数）をマウント済みに書き込みます
コード例
親コンポーネントコード：
<template>
<TodoHeader ref="Header"/>
</template>
new Vue({
mounted () {//执行异步代码
//给Header组件绑定事件监听（第三种方式）
this.$refs.Header.$on("addTodo",this.addTodo) //（函数名，回调函数）
}
})
サブコンポーネントコード：
methods:{
this.$emit("addTodo",todo); //将方法addTodo(todo) 的拆分 addTodo为方法名 todo为方法的参数
}
4番目のメッセージのサブスクリプションと公開
pubsubライブラリ：はいクロスコンポーネントを実装する情報通信、レイヤーごとの面倒な情報転送を取り除きます。
詳細については、次の記事「24-vueのコンポーネントの通信方法の1つ：メッセージのサブスクリプションと公開の使用、およびpubsub-jsライブラリのインストール」を参照してください。リンクは次のとおりです。
リンク：通信の1つ24-vueのコンポーネントのメソッド：ニュースの購読と公開の使用、pubsub-jsライブラリのインストール。
5番目のスロット
理解
スロットスロット、運ばれたコンテンツを特定の位置に挿入し、この位置を再利用可能にします。したがって、この位置は別のタグに置き換えることができます。
スロットと他の通信方法の違い
通信方式スロット通信はラベル、および他の通信方法（関数、配列、パラメーター、変数などを含む）によって通信されるデータ。
指示
後者が使用するラベルを親コンポーネントの子コンポーネントに転送するには、slotメソッドを使用します。また、ラベルの対応するメソッドも親コンポーネントに書き込む必要があります。つまり、スロットを使用する場合、子コンポーネントで使用されるタグとメソッドは、親コンポーネントで宣言および定義してから、スロットを通過させる必要があります。
コード例
親コンポーネントコード：子コンポーネントに渡されるラベルにslot = "slotName"属性を追加します
<todo-footer>
<input type="checkbox" v-model="isAllCheck" slot="check"/>
<span slot="count">已完成{
{completeSize}} / 全部{
{todos.length}}</span>
<button slot="delete" class="btn btn-danger" v-show="completeSize" @click="deleteCompleteTodos">清除已完成任务</button>//相应的方法应该在父组件vm中定义声明
</todo-footer>
サブコンポーネントコード：スロットを設定します<slotname = "xxx">
<template>
<div class="todo-footer">
<!-- 使用slot之前的写法-->
<!-- <button class="btn btn-danger" v-show="completeSize" @click="deleteCompleteTodos">清除已完成任务</button>-->
<!--使用slot插槽方法-->
<slot name="delete"></slot>
</div>
</template>
注：
カスタムイベントメソッドを使用する場合は、より便利です。だが親コンポーネントと子コンポーネント間の通信に適しています。情報がレイヤーごとに渡される状況には適していません。
3番目の方法はより複雑で、一般的には使用されません。
親コンポーネントと子コンポーネント間のコミュニケーションのスキル->
レイヤーごとにコミュニケーションする必要がある場合は、小道具メソッドまたはカスタムイベント（より便利）を使用します->メッセージを使用してサブスクライブおよびパブリッシュする直接通信
部品を多用する場合は→スロットを使用