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>