vue-cliでコンポーネント通信を実装する方法

この記事では主にvue-cliでのコンポーネント通信の方法を紹介していますが、編集者がとても良いと思ったので、参考にさせていただきます。編集者をフォローして見てみましょう

この記事ではvue-cliでのコンポーネント通信の方法を紹介し、皆さんに共有します。詳細は次のとおりです:

vue コンポーネント間の通信には 3 つのタイプがあります:

1. 親コンポーネントが子コンポーネントと通信する
3. 兄弟コンポーネント間の通信

1.子コンポーネント間の通信

app.vue を親コンポーネント、content.vue を子コンポーネントとします

1. 子コンポーネントを親コンポーネントにインポートします (子コンポーネントのエクスポート)

import contents from './components/content';

2.親コンポーネント内の子 Component

  data() {
    return {
        test:'0'
    };
  },
  components:{
    'v-header':headers,
    'v-content':contents
  }

3. 子コンポーネントは props

<v-content :childs=&#39;test&#39;></v-content>

2. 子コンポーネントと親コンポーネントの通信

子コンポーネント:

<template>
  <p @click="down()"></p>
</template>

methods: {
  down() {
    this.$emit(&#39;down&#39;,&#39;null&#39;); //主动触发down方法，&#39;null&#39;为向父组件传递的数据
  }
}

親コンポーネント:

<p>
  <child @down="changes" :test="test"></child> //监听子组件触发的down事件,然后调用changes方法
</p>
methods: {
  changes(msg) {
    this.test= test;
  }
}

2.子コンポーネントの通信

//把a当作一个中转站
var a = new Vue();

コンポーネント 1 のトリガー:

<p @click="eve"></p>
methods:{
  eve(){
  a.$emit("change",&#39;null&#39;)
 }
}

コンポーネント 2 の受信:

<p></p>
created(){
  a.$on(&#39;change&#39;,()=>{
    this.msg = &#39;null&#39;
  })
}

上記は、皆さんのためにまとめたものです。将来的に皆さんのお役に立てれば幸いです。

関連記事:

vue-cliでモバイルアダプテーションを実装する方法

VueコンポーネントToastにディスプレイボックスエフェクトを実装する方法

webpackのルールパラメータ処理について

AngularJSの使い方簡単な計算を実装します

以上がvue-cliでコンポーネント通信を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。