Vue 組件通訊詳解

父子組件通訊： props、 $parent / $children、 provide / inject 、 ref 、  $attrs / $listeners
兄弟組件通訊：EventBus 、 Vuex
跨級組件通訊: EventBus 、 Vuex 、 provide / inject 、 $attrs / $listeners

父傳子 子組件用 props 接收，父組件用 v-bind:prop 發送
父組件
<template>
  <div class="section">
    <com-article :articles="articleList"></com-article>
  </div>
</template>
<script>
import comArticle from "./comArticle";
export default {
  data() {
    return {
      articleList: ["紅樓夢", "西遊記", "三國演義", "水滸傳"]
    }
  },
  components: { comArticle },
}
</script>
子組件
<template>
  <ul>
    <li v-for="(item, index) in articles" :key="index">{{item}}</li>
  </ul>
</template>
<script>
export default {
  props: ["articles"]
}
</script>


子傳父 子組件用 v-on:click="" this.$emit('name', this.msg)（【有的版本名稱只能小寫】）發送，父組件自定義事件 v-on:name="getChildValue" 而後在 getChildValue(data){} 方法中接收
父組件
<template>
  <div class="section">
    <com-article @onEmitIndex="onEmitIndex"></com-article> 【不能加括號】
    <ul>
      <li v-for="(item, index) in articles" :key="index">{{item}}</li>
    </ul>
  </div>
</template>
<script>
import comArticle from "./com2";
export default {
  data() {
    return {
        articles:[]
    };
  },
  components: { comArticle },
  methods: {
    onEmitIndex(data) {
      this.articles = data;
    }
  }
}
</script>
子組件
<template>
  <div>
    <button @click="emitIndex()">點擊把articleList傳給父組件</button> 【能夠傳參】
  </div>
</template>

<script>
export default {
  data() {
    return {
      articleList: ["紅樓夢", "西遊記", "三國演義", "水滸傳"]
    };
  },
  methods: {
    emitIndex() {
      this.$emit("onEmitIndex", this.articleList); // 
    }
  }
}
</script>


父子傳參還能夠用 $parent（對象）和 $children（數組）


provide / reject （上傳下）
父輩組件中經過 provide 來提供變量，子孫組件中經過 reject 來注入變量。
父組件
<template>
  <div>
    com1 是父組件
    <com2></com2>
  </div>
</template>
<script>
  import com2 from './com2.vue'
  export default {
    provide: {
      msg: "這是父輩組件 com1 傳出去的數據"
    },
    components:{
      com2
    }
  }
</script>
子組件
<template>
  <div>
    com2 是 com1 的子組件
    {{demo}}
    <com3></com3>
  </div>
</template>
<script>
  import com3 from './com3.vue'
  export default {
    inject: ['msg'],
    data() {
      return {
        demo: this.msg
      }
    },
    components: {
      com3
    }
  }
</script>
孫組件
<template>
  <div>
    com3 是 com1 的孫組件
    {{msg}}
  </div>
</template>
<script>
  export default {
    inject: ['msg']
  }
</script>


ref
若是在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；若是用在子組件上，引用就指向組件實例，能夠經過實例直接調用組件的方法或訪問數據 ref="xx" this.$refs.xx

eventBus（事件總線，項目較大難以維護，組件均可以傳） $emit(name, data)發送 $on(name, data=>{})接收 【名稱小寫】
event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()

com1.vue 發送事件
<button @click="additionHandle">加法器</button>
import {EventBus} from './event-bus.js'
data(){
  return {num: 1}
},
additionHandle(){
  EventBus.$emit('addition', {num: this.num++}
)

com2.vue 接收事件
<div>計算和: {{count}}</div>
data() {
  return {count: 0}
},
mounted() {
  EventBus.$on('addition', param => {
    this.count = this.count + param.num;
  })
}


localStorage / sessionStorage
由於 window.loacalStorage.setItem(key, value)、window.loacalStorage.getItem(key) 儲存的是字符串，須要用 JSON.parse() / stringify() 轉換
可結合 vuex，實現數據持久保存和解決數據及狀態混亂問題


$attrs $listeners（僅僅是傳遞數據，而不作中間處理，使用 vuex 處理，未免有點大材小用）
test.vue
<template>
  <div>
    test.vue
    <child-com1 :name="name" :age="age" :gender="gender" :height="height" title="test.vue 傳出的值"></child-com1>
  </div>
</template>
<script>
const childCom1 = () => import("./com1.vue");
export default {
  components: { childCom1 },
  data() {
    return {
      name: "zhangsan",
      age: "18",
      gender: "女",
      height: "158"
    };
  }
};
</script>
<style scoped>
div{
    background-color: #ddd;
}
</style>
com1.vue
<template>
  <div class="com1">
    com1
    <p>name: {{name}}</p>
    <p>childCom1的$attrs: {{$attrs}}</p>
    <child-com2 v-bind="$attrs"></child-com2>
  </div>
</template>
<script>
const childCom2 = () => import("./com2.vue");
export default {
  components: {
    childCom2
  },
  inheritAttrs: false, // 關閉自動掛載到組件根元素上的沒有在 props 聲明的屬性
  props: {
    name: String
  },
  created() {
    console.log(this.$attrs);
    // {age: "18", gender: "女", height: "158", title: "test.vue 傳 com1.vue"}
  }
};
</script>
<style scoped>
.com1{
  margin: 20px;
  background-color: #f00;
}
</style>
com2.vue
<template>
  <div>com2
    <p>age: {{age}}</p>
    <p>childCom2: {{ $attrs }}</p>
  </div>
</template>
<script>
export default {
  inheritAttrs: false,
  props: {
    age: String
  },
  created() {
    console.log('com2', this.$attrs);
    // { "name": "zhang", "gender": "女", "height": "158", "title": "程序員成長指北" }
  }
};
</script>
<style scoped>
div{
  background: #0f0;
  margin: 20px
}
</style>