Vueで親子コンポーネント通信を実装する方法

1. 親コンポーネントと子コンポーネントの関係

この記事では、Vue における親コンポーネントと子コンポーネント間の通信方法についてまとめます。

では、Vue では親コンポーネントと子コンポーネントの関係はどのように構築されるのでしょうか。また、どのコンポーネントを親コンポーネントと呼び、どのコンポーネントを子コンポーネントと呼ぶことができるのでしょうか。

私の理解では、親コンポーネントと子コンポーネントの関係も比較的単純です。

vue-cli ツールを使用して構築されたプロジェクトでは、1 つのコンポーネントに別のコンポーネントへの参照を登録することがよくあります。

ホーム.vue

<テンプレート>
  <div class="home">
    <p>これはホームコンポーネントです</p>
  </div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
  名前: 'ホーム'
}
</スクリプト>
<スタイルスコープ>
    。家{
        境界線:1px 実線 #4488ff;
        表示: インラインブロック;
        パディング: 10px;
    }
</スタイル>

アプリ.vue

<テンプレート>
  <div id="アプリ">
    <p>これがアプリコンポーネントです</p>
    <!-- stpe3: 使用 -->
    <ホーム></ホーム>
  </div>
</テンプレート>

<スクリプト>
// ステップ1: './components/Home' から Home をインポートします
エクスポートデフォルト{
  名前: 'アプリ'、
  // ステップ2: コンポーネントを登録する: { ホーム }   
}
</スクリプト>

<スタイル>
＃アプリ {
  フォントファミリ: 'Avenir'、Helvetica、Arial、sans-serif;
  -webkit-font-smoothing: アンチエイリアス;
  -moz-osx-font-smoothing: グレースケール;
  色: #2c3e50;
  表示: インラインブロック;
  border:1px オレンジ一色;
  パディング: 10px;
}
</スタイル>

上記 2 つのコンポーネントでは、App コンポーネントに Home コンポーネントを導入し、登録して使用しました。

Vue では、App コンポーネントを親コンポーネント、Home コンポーネントを子コンポーネントと呼ぶことができます。これら 2 つのコンポーネントは親子関係を形成します。

ここで注目すべきは、導入、登録、利用という3つのステップが不可欠であるということです。

そうしないと、2 つのコンポーネントは親子関係を形成できず、後述するいくつかの通信方法を使用して通信することもできません。

Vue における親子コンポーネントの構成関係を理解した後、親子コンポーネントが相互に通信する方法について説明します。

2. 小道具

Vue で親子コンポーネントが通信する最初の方法は props 属性を使用することで、親コンポーネントが子コンポーネントと通信します。

実践してみましょう。

まず、親コンポーネント内で子コンポーネントが使用されている場所を見つけ、親コンポーネントが子コンポーネントに渡す必要があるデータを追加します。

App.vue (変更されていないコードの一部は省略)

<テンプレート>
  <div id="アプリ">
    <p>これがアプリコンポーネントです</p>
    <ホーム
        タイトル="Vue における親コンポーネントと子コンポーネント間の通信方法"
        2020/03/05 14:25 更新
    </ホーム>
  </div>
</テンプレート>

ご覧のとおり、このステップでは、サブコンポーネントが使用されるサブコンポーネントに渡す必要がある 2 つのデータ (タイトルと日付) を追加しました。

<ホーム
     タイトル="Vue における親コンポーネントと子コンポーネント間の通信方法"
     2020/03/05 14:25 更新
</ホーム>

次のステップでは、子コンポーネントで props を使用して、これら 2 つのパラメータを受け取ります。

Home.vue (変更されていないコードの一部は省略)

<スクリプト>
エクスポートデフォルト{
  名前: 'ホーム'、
  プロパティ: ['タイトル', '日付']
}
</スクリプト>

最後のステップでは、vue データを使用する場合と同じように、子コンポーネントでタイトルと日付を使用できます。

Home.vue (変更されていないコードの一部は省略)

<テンプレート>
  <div class="home">
    <p>これがホームコンポーネントです</p>
    <p>タイトル:{{タイトル}}</p>
    <p>日付:{{date}}</p>
  </div>
</テンプレート>

プロジェクトを開始したら、ブラウザで効果を確認します。

3. $エミット

Vue における親子コンポーネント通信の 2 番目の方法は、子コンポーネントと親コンポーネント間の通信である $emit メソッドを使用することです。

$emit メソッドは Vue のインスタンスメソッドであり、その使用方法は次のとおりです。

最初のパラメータ eventName はイベント名と呼ばれます。

イベント名に対応するイベントは、親コンポーネントの v-on がリッスンするネイティブ DOM イベントです (クリックのようなカスタムイベントとして理解できます)。

子コンポーネントで $emit(eventName) を実行すると、親コンポーネントの対応するイベントがトリガーされます。

したがって、最初に子コンポーネントの $emit メソッドを使用して、親コンポーネントでイベントをトリガーするコードを記述します (2 番目のパラメーターを渡さずに)。

ホーム.vue

<テンプレート>
  <div class="home">
    <p>これはホームコンポーネントです</p>
    <el-button type="primary" v-on:click='btnClickHandler("Yes")'>はい</el-button>
    <el-button type="primary" v-on:click='btnClickHandler("No")'>いいえ</el-button>
  </div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
  名前: 'ホーム'、
  メソッド: {
    btnClickHandler: 関数(パラメータ){
        if(パラメータ == "はい"){
            これを$emit('sayYes');
        }それ以外の場合(パラメータ == "いいえ"){
            this.$emit('sayNo');
        }
    }
  }
}
</スクリプト>

ご覧のとおり、Home サブコンポーネントには 2 つのボタンがあります。

[はい] ボタンをクリックすると、 this.$emit('sayYes') が実行され、親コンポーネントで sayYes イベントがトリガーされます。

[いいえ] ボタンをクリックすると、this.$emit('sayNo') が実行され、親コンポーネントで sayNo イベントがトリガーされます。

次に、親コンポーネントに対応するネイティブ DOM イベントを実装します。

アプリ.vue

<テンプレート>
  <div id="アプリ">
    <p>これがアプリコンポーネントです</p>
    <ホーム
        v-on:sayYes='val="はい"'
        v-on:sayNo='val="no"'>
    </ホーム>
    <p>値: {{val}}</p>
  </div>
</テンプレート>

<スクリプト>
'./components/Home' から Home をインポートします。
エクスポートデフォルト{
  名前: 'アプリ'、
  データ（） {
    戻る {
      値: "デフォルト",
    }
  },
  コンポーネント: { ホーム },
}
</スクリプト>

このうち、 sayYes と sayNo は親コンポーネントで定義されたネイティブ DOM イベントです。

<ホーム
        v-on:sayYes='val="はい"'
        v-on:sayNo='val="no"'>
</ホーム>

val は親コンポーネントで定義されたデータであり、そのデフォルト値は 'default' です。

次に、サブコンポーネントのコードロジックと組み合わせると、次の結果が得られることがわかります。

[はい] ボタンをクリックすると、 this.$emit('sayYes') が実行され、親コンポーネントで sayYes イベントがトリガーされます。 sayYes イベントでは、vue データ内の val 値が yes に変更されます。

[No] ボタンをクリックすると、this.$emit('sayNo') が実行され、親コンポーネントで sayNo イベントがトリガーされます。sayNo イベントでは、vue データ内の val 値が no に変更されます。

ブラウザで当社の声明を確認してください。

IV. $親

$parent は Vue のインスタンスプロパティであり、現在のコンポーネントの親インスタンスを表します。

親コンポーネントに sayYes というメソッドがある場合は、子コンポーネントで this.$parent.sayYes を直接使用して、親コンポーネントメソッドを呼び出すことができます。

アプリ.vue

<テンプレート>
  <div id="アプリ">
    <p>これがアプリコンポーネントです</p>
    <ホーム></ホーム>
    <p>値: {{val}}</p>
  </div>
</テンプレート>

<スクリプト>
'./components/Home' から Home をインポートします。
エクスポートデフォルト{
  名前: 'アプリ'、
  データ（） {
    戻る {
      値: "デフォルト",
    }
  },
  コンポーネント: { ホーム },
  メソッド: {
    言うはい: 関数() {
      this.val = "はい";
    },
    いいえと言う: 関数() {
      this.val = "いいえ";
    }
  }
}
</スクリプト>

親コンポーネントに sayYes と sayNo という 2 つのメソッドを定義しました。それぞれのロジックは、val の値を yes に変更し、val の値を no に変更します。

次に、子コンポーネントで this.$parent.sayYes と this.$parent.sayNo を使用して、親コンポーネントの対応する sayYes メソッドと sayNo メソッドを呼び出すことができます。

ホーム.vue

<テンプレート>
  <div class="home">
    <p>これはホームコンポーネントです</p>
    <el-button type="primary" v-on:click='btnClickHandler("Yes")'>はい</el-button>
    <el-button type="primary" v-on:click='btnClickHandler("No")'>いいえ</el-button>
  </div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
  名前: 'ホーム'、
  メソッド: {
    btnClickHandler: 関数(パラメータ){
        if(パラメータ == "はい"){
            this.$parent.sayYes();
        }それ以外の場合(パラメータ == "いいえ"){
            this.$parent.sayNo();
        }
    }
  }
}
</スクリプト>

子コンポーネントの btnClickHandler メソッドのコードが this.$parent に変更されました。

それでは結果を見てみましょう。