[JavaScript知识库]vue父组件给子孙组件传值（provide && inject）

vue框架传值常用的有：

1、父传子，在父组件里面的子组件上通过v-bind绑定一个变量传给子组件，对应的子组件里面通过props来接受；

2、子传父：在父组件里面的子组件上自定义个一个方法，用来接受子组件传上来的数据，代码示例如下：

父组件代码片段：

//父组件

<condition-com
   :vessel="vessel"
   @changeLeftComponnet="changeLeftComponnet"
/>

// 父组件里面定义的子组件conditionCom，在conditionCom组件上面自定义一个方changeLeftComponnet，用来接受子组件传给父组件的数据，接受的方式如下：

changeLeftComponnet(val) {
    // 这里可以做任何的事情
    this.leftComponentName = val     
},

子组件代码片段：

<div @click='handlerChange'>
    111222333
</div>


handlerChange(){
    // 这个changeLeftComponnet就是父组件自定义的方法名，必须保持一致，后面的为传给父组件的数据
    this.$emit('changeLeftComponnet', 112233)
}

3、provide、inject：父组件给子孙组件传值

使用方法参考demo：

父组件：

<template>
  <div>
    <h2>CHINESE PORT</h2>
    <h2>这是父组件: {{ father }}</h2>
    <son-com />
  </div>
</template>

<script>
import sonCom from './sonCom.vue'
export default {
  components: { sonCom },
  provide() {
    return {
      sonDate: '子组件数据',
      childDate: '孙组件数据'
    }
  },
  data() {
    return {
      father: '父组件数据'
    }
  },
  methods: {

  }
}
</script>

<style lang='scss' scoped>

</style>

子组件sonCom：

<template>
  <div>
    <h3>这是子组件: {{ sonDate }}</h3>
    <grand-child-com />
  </div>
</template>

<script>
import grandChildCom from './grandChildCom.vue'
export default {
  components: { grandChildCom },
  inject: ['sonDate']
}
</script>

<style>

</style>

孙组件grandChildCom：

<template>
  <div>
    <h4>这是孙组件: {{ childDate }} </h4>
  </div>
</template>

<script>
export default {
  inject: ['childDate']
}
</script>

<style>

</style>

运行之后的页面效果为：

?4.父子、兄弟、跨级：eventBus.js
这种方法通过一个空的 Vue 实例作为中央事件总线（事件中心）,用它来（ e m i t ） 触 发 事 件 和 （ emit）触发事件和（ emit）触发事件和（on）监听事件，巧妙而轻量地实现了任何组件间的通信。

5.通信插件：PubSub.js

6.vuex
vuex 是 vue 的状态管理器，存储的数据是响应式的。只需要把共享的值放到vuex中，其他需要的组件直接获取使用即可；