Vue父子組件、子父組件、非父子組件通信

1、父子組件傳值通信，在子組件中使用props屬性，靜態或者動態傳遞父組件的變量值

<template>
  <div id="app">
    <div>
      <div style="display: inline-block;">
        <div class="btn-div btn-bg">{{msg}}</div>
      </div>
      <child-one :list="listItem"> </child-one>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue'
  export default {
    name: 'App',
    data() {
      return {
        msg: "四大美女",
        listItem: ["春秋越過 西施", "漢朝  王昭君", "三國 貂蟬", "唐朝 楊玉環"]
      }
    },
    components: {
      'child-one': {
        template: '<div class="childDiv"><div v-for="item in list">{{item}}</div></div>',
        //使用props獲取父組件的值 ，引用 <child-one :list="listItem"> </child-one>中的key=list
        props: ['list']
      },
    }
  }
</script>

2、子父組件通信，使用組件對象的$emit函數，綁定自定義事件將子組件的數據傳遞給父組件

實例：點擊四大美女列表修改標題

<template>
  <div id="app">
    <div>
      <div style="display: inline-block;">
        <div class="btn-div btn-bg">{{title}}<span>{{subTitle}}</span></div>
      </div>
      <!-- 子組件綁定自定義事件 自定義事件出發後出發父組件的getChildContent函數，就可把子組件的數據傳遞到父組件 -->
      <child-one  @childClickEv="getChildContent"> </child-one>
    </div>
  </div>
</template>
<script>
  import Vue from 'vue'
  export default {
    name: 'App',
    data() {
      return {
        title: "四大美女",
        subTitle:"",
      }
    },
    methods:{
      getChildContent:function(s){
        //this 當前父組件對象
        console.log("getChildContent---s="+s);
        this.subTitle=s;
      }
    },
    components: {
      'child-one': {
        //子組件元素綁定getBeautyInfo事件
        template: '<div class="childDiv"><div @click="getBeautyInfo" v-for="item in listItem" style="margin-top: 3px;">{{item}}</div></div>',
        data:function(){
         return{
           listItem: ["春秋越過 西施", "漢朝  王昭君", "三國 貂蟬", "唐朝 楊玉環"]
         }
       },
       methods:{
         getBeautyInfo:function(ev){
              //this 當前子組件對象
              //子組件元素的點擊事件後 觸發一個自定義事件childClickEv，第二個參數爲子組件需要傳遞的參數
              this.$emit('childClickEv',ev.target.innerHTML);
         }
       }
      },
    }
  }
</script>

3、非父子組件之間的通信

  實例 實現一個加減器

<template>
  <div id="app">
    <div>
      <child-add :count="count"></child-add>
      <div class="text-div btn-div">{{count}}</div>
      <child-sub :count="count" ></child-sub>
    </div>
  </div>
</template>
<script>
  import Vue from 'vue'

  var busVue=new Vue();
  export default {
    name: 'App',
    data() {
      return {
        count:0
      }
    },
   //把兩個子組件的自定義事件掛載在busVue實例上
    mounted:function(){
      busVue.$on('addCountEv',function(n){
          this.count=n;
      }.bind(this));
      busVue.$on('subCountEv',function(n){
          this.count=n;
      }.bind(this));
    },
    components: {
      'child-add': {
        template: '<div @click="add"  class="btn-div btn-bg">{{addMsg}}</div>',
        data:function(){
          return{
             addMsg:"增加"
          }
        },
        props:['count'],
        methods:{
          add:function(){
             busVue.$emit("addCountEv",this.count+1);
          }
        }
       },
      'child-sub':{
         template: '<div @click="sub"  class="btn-div btn-bg">{{subMsg}}</div>',
         data:function(){
           return{
              subMsg:"減少"
           }
         },
         props:['count'],
         methods:{
           sub:function(){
             busVue.$emit("subCountEv",this.count-1);
           }
         }
      }
    }
  }
</script>