vue 中子コンポーネントと親コンポーネントの通信には this.$emit () を使用する必要があります。まず、親コンポーネントと子コンポーネントの通信には何を使用するかを振り返りましょう。#
1. 親コンポーネントから子コンポーネントへの値の受け渡し：v-bind:の形式でデータを渡す（省略形としてコロンを使用することもできます）。そして、子コンポーネントはpropsを使用して受け取ります。
例：
// 親コンポーネント
<todo-item v-bind:item="item"
v-bind:index="index"
v-for="(item,index) in list"></todo-item>
// 子コンポーネント
var TodoItemValue = {
props: ['item','index'],// 'item','index'は親コンポーネントからv-bindで渡されるものです
template:"<li>{{item}}{{index}}</li>"
}
2. 子コンポーネントから親コンポーネントへの値の受け渡し：この場合はthis.$emit()メソッドを使用する必要があります
子コンポーネントから親コンポーネントへの値の受け渡しの基本的な手順は以下の通りです：#
ステップ 1：親コンポーネントで子コンポーネントをインポートする#
- import を使用してコンポーネントをインポートします
import indexImportOrder from './components/indexImportOrder'
- 宣言
// コンポーネントを定義する
components:{
indexImportOrder,
},
- 使用
<indexImportOrder ref="indexImportOrder"/>
ステップ 2：子コンポーネントから親コンポーネントへの値の受け渡し#
- 子コンポーネント内で親コンポーネントに値を渡す場所で this.$emit ("function", param); を使用します。
ここで、functionは親コンポーネントで定義された関数であり、paramは渡す必要のあるパラメータです。
// 新しい注文ページへの遷移
viewBusiness(){
let flag = false;
this.$emit('closeMain',flag);
},
- 子コンポーネントの参照箇所で関数 v-on="function1" を追加します。
ここで、functionは子コンポーネントで定義された関数であり、function1は親コンポーネントで定義された関数であり、子コンポーネントからの値を受け取り、適切なデータ処理を行うために同じ名前にすることができます。
v-on：は @ で置き換えることができます。@function="function1" は @の省略形です。
<indexImportOrder ref="indexImportOrder" v-on:closeMain="closeMain"/>
- val は子コンポーネントの flag であり、受け取った子コンポーネントのパラメータです。
closeMain(val){
this.flag = val;
},