vue父组件给子孙组件传值（provide inject）

组件给子孙组件传值（provide inject）"/>

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中，其他需要的组件直接获取使用即可；