在vue-cli中如何實現組件通信

這篇文章主要介紹了在vue-cli中組件通訊的方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧

本文介紹了在vue-cli中組件通訊的方法，分享給大家。具體如下：

vue元件之間的通訊包括三種：

1.父元件向子元件通訊
2.子元件向父元件通訊
3.同層級元件之間的通訊

一.父傳子元件通訊

#拿app.​​vue當父元件，content. vue當子元件

1.父元件中匯入子元件（子元件匯出）

import contents from './components/content';

2.在父元件中註冊子元件

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

3.子元件透過props來接收資料

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

二.子與父元件通訊

#子元件：

<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;
  }
}

二.非父子元件通訊

//把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中rules參數處理

#在AngularJS中如何實作簡單的計算

以上是在vue-cli中如何實現組件通信的詳細內容。更多資訊請關注PHP中文網其他相關文章！