组件是Vue强大的功能之一，但是不同组件之间的作用域却是相互独立的，这意味着不同组件之间的数据无法相互共享。
一般来说组件的关系主要是这么几种
组件A和组件B、组件A组件C、组件B和组件D、组件C和组件E为父子组件，组件B和组件C、组件D和组件E为兄弟组件、组件A和组件D、组件组件A和组件E为隔代组件。
面对不同的使用场景，如何选择行之有效的数据共享方式（通信方式）是我们要探讨的主题
本文总结了一下几种常见的组件通信方式
一、父子组件之间的组件通信
父向子
props
父组件向子组件传递数据主要通过props方式来实现示例代码如下
<!--父组件-->
<template>
<!--组件传值-->
<div id="app">
<son :title="title"></son>
</div>
</template>
<script>
import son from '@/components/son.vue'
export default {
name: 'fatherComponemts',
components: {
son
},
data () {
return {
title: '父组件向子组件传递的值'
}
}
}
</script>
<style lang="less">
</style>
<template>
<div>
<!--子组件-->
{{ title }}
</div>
</template>
<script>
export default {
name: 'sonComponemts',
// 定义props来接收父组件传递的值
props: [
title: {
type: String
]
}
}
</script>
<style>
</style>
v-model
其实 v-model 也能实现组件通信 因为 v-model 就是 :value 和 @input 事件的合写 如果在一个子组件上使用 v-model 也能实现父子组件之间的通信
子向父
子组件向父组件传递数据主要通过自定义事件方式来实现示例代码如下
父组件
<template>
<!--组件传值-->
<div id="app">
<!-- <son :title="title" @getSonTitle="updateTitle"></son> -->
<son @getSonTitle="updateTitle"></son>
{{ title }}
</div>
</template>
<script>
import son from '@/components/son.vue'
export default {
name: 'fatherComponemts',
components: {
son
},
// data () {
// return {
// title: '父组件向子组件传递的值'
// }
// },
methods: {
updateTitle (zixiangfu) {
this.title = zixiangfu
}
}
}
</script>
<style lang="less">
</style>
子组件
<template>
<div>
<!--子组件-->
<h1 @click="changeTitle">{{ title }}</h1>
</div>
</template>
<script>
export default {
name: 'sonComponemts',
// 定义props来接收父组件传递的值
// props: [
// title: {
// type: String
// }
// ],
data () {
return {
zixiangfu: '子组件向父组件传递数据'
}
},
methods: {
changeTitle () {
this.$emit('getSonTitle', this.zixiangfu)
}
}
}
</script>
<style>
</style>
二、兄弟组件之间的组件通信
兄弟组件之间的通信需要建一个eventBus.js文件夹使用步骤如下
- 创建
eventBus.js模块，并向外共享一个 Vue 的实例对象 - 在数据发送方，调用
bus.$emit('事件名称', 要发送的数据)方法触发自定义事件 - 在数据接收方，调用
bus.$on('事件名称', 事件处理函数)方法注册一个自定义事件。
代码示例如下
组件A
<template>
<div>
<!--兄弟组件A(数据发送方）-->
<!-- <h1 @click="changeTitle">{{ title }}</h1> -->
</div>
</template>
<script>
import { eventBus } from './eventBus'
export default {
name: 'sonComponemts',
// 定义props来接收父组件传递的值
// props: [
// title: {
// type: String
// ]
// },
data () {
return {
// zixiangfu: '子组件向父组件传递数据',
xiongdizujian: '兄弟组件传值'
}
},
created () {
this.submitBother()
},
methods: {
// changeTitle () {
// this.$emit('getSonTitle', this.zixiangfu)
// },
submitBother () {
eventBus.$emit('share', this.xiongdizujian)
}
}
}
</script>
<style>
</style>
eventBus.js文件
// eventBus.js
import Vue from 'vue'
export const eventBus = new Vue()
兄弟组件B
<template>
<div>{{ xiongdizujian }}</div>
</template>
share
<script>
// 导入eventBus.js
// 在组件的接受方使用this.$on接受数据
import { eventBus } from './eventBus'
export default {
name: 'botherComponent',
created () {
eventBus.$on('share', (bother) => { this.xiongdizujian = bother })
},
data () {
return { xiongdizujian: '' }
}
}
</script>
<style>
</style>
三、跨级组件通信
组件通信的终极解决方案是vuex，Vuex 是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享。它主要用于存储一些需要被共享的组件中的数据，对于不需要共享的数据则只需要存储在组件自己的data中
- 集中管理共享的数居，易于开发和维护
- 高效地实现组件之间的数据共享，提高开发效率
- 响应式数据，与页面的同步
vuex的基本使用示例
1.安装vuex依赖包
CDN
<script src="/path/to/vue.js"></script>
<script src="/path/to/vuex.js"></script>npm
npm install vuex@next --saveyarn
yarn add vuex@next --save
自己构建：
如果需要使用 dev 分支下的最新版本，您可以直接从 GitHub 上克隆代码并自己构建
git clone https://github.com/vuejs/vuex.git node_modules/vuex
cd node_modules/vuex
yarn
yarn build
一张图看懂vuex
state:唯一数据源，所有的数据都需要存放在这里调用方式为在组件中需要使用this.$store.state作为插值渲染，
// this.$store.state.全局数据名称
<h3>当前最新的count值为：{{$store.state.count}}</h3>
也可以使用map函数映射..map{[数据名称]}但是前提是组件中导入了。
// 1. 在想使用数据的组件中 从 vuex 中按需导入 mapState 函数
import { mapState } from 'vuex'
// 2. 将全局数据，映射为当前组件的计算属性
computed: {
...mapState(['count'])
}
mutations:更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的事件类型 (type)和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数(一条重要的原则就是要记住 mutation 必须是同步函数)
// 定义 Mutation
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
add(state) {
// 变更状态
state.count++
}
}
})
在组件中提交mutation需要通过this.$store.commit('xxx') 方法或者使用mapMutations辅助函数将组件中的methods映射为store.commit
getter:有时我们需要对state中的数据进行一些加工过滤处理,我们可以把处理函数定义在getter中。
const store = createStore({
state: {
todos: [
{ id: 1, text: '...', done: true },
{ id: 2, text: '...', done: false }
]
},
getters: {
doneTodos (state) {
return state.todos.filter(todo => todo.done)
}
}
})可以通过属性的方式访问
store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]我们可以在任意的组件中使用他
computed: {
doneTodosCount () {
return this.$store.getters.doneTodosCount
}
}还可以通过方法来访问
getters: {
// ...
getTodoById: (state) => (id) => {
return state.todos.find(todo => todo.id === id)
}
}store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }同时还可以使用map辅助函数来调用
import { mapGetters } from 'vuex'
export default {
// ...
computed: {
// 使用对象展开运算符将 getter 混入 computed 对象中
...mapGetters([
'doneTodosCount',
'anotherGetter',
// ...
])
}
}如果你想给map函数映射过来的getter另外起一个名字可以
...mapGetters({
// 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`
doneCount: 'doneTodosCount'
})Action:它的作用类似与mutation但是他是用于提交mutation的而不是直接操作state主要执行的是异步操作，
actions: {
increment ({ commit }) {
commit('increment')
}
}使用store.dispatch方法触发
store.dispatch('increment')
vuex 是 vue 的状态管理器，存储的数据是响应式的。但是并不会保存起来，刷新之后就回到了初始状态，具体做法应该在 vuex 里数据改变的时候把数据拷贝一份保存到 localStorage 里面，刷新之后，如果 localStorage 里有保存的数据，取出来再替换 store 里的 state。 想要持久化存储还要借助vuex持久化存储插件详情件vuex持久化存储
- $attrs/$listeners
如果我们仅仅只是共享数据而不做其他任何的操作使用vuex是有一些大才小用了，因此vue2中给我们提供了$attrs/$listeners
$attrs：包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定一个组件中如果没有声明props这里将会包含父作用域中所有特性绑定class和style除外可以通过v-bind传入内部组件通常配合 interitAttrs 选项一起使用。
$listeners：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件。
接下来我们可以通过下面的跨级通信做一个演示
//根组件
<template>
<div>
<son :todo="todo" :javascript="javaScript" :ajax="ajax"></son>
</div>
</template>
<script>
import son from '@/components/son1.vue'
export default {
name: 'APP',
components: {
son
},
data () {
return {
todo: '前端真好',
javaScript: '前端最棒',
ajax: '前端最强大'
}
}
}
</script>
<style>
</style>
son1
<template>
<div>
son1 todo:{{ todo }}
{{ $attrs }}
<son2 v-bind="$attrs"></son2>
</div>
</template>
<script>
import son2 from '@/components/son2.vue'
export default {
name: 'child-son',
components: {
son2
},
inheritAttrs: false, // 可以关闭自动挂载到组件根元素上的没有在 props 声明的属性
props: {
todo: {
type: String
}
}
}
</script>
<style lang="less" scoped>
div{
border: 1px solid red;
}
</style>
son2
<template>
<div>
son2 {{ $attrs }}
</div>
</template>
<script>
export default {
name: 'child2-son2'
}
</script>
<style>
</style>
简单来说：$attrs 与 $listeners 是两个对象，$attrs 里存放的是父组件中绑定的非 Props 属性，$listeners 里存放的是父组件中绑定的非原生事件。
provide/inject
转载自小邱程序员的文章组件传值完整版
Vue2.2.0 新增 API,这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。一言而蔽之：祖先组件中通过 provider 来提供变量，然后在子孙组件中通过 inject 来注入变量。
provide / inject API 主要解决了跨级组件间的通信问题，不过它的使用场景，主要是子组件获取上级组件的状态，跨级组件间建立了一种主动提供与依赖注入的关系。
假设有两个组件： A.vue 和 B.vue，B 是 A 的子组件
// A.vue
export default {
provide: {
name: '浪里行舟'
}
}
// B.vue
export default {
inject: ['name'],
mounted () {
console.log(this.name); // 浪里行舟
}
}可以看到，在 A.vue 里，我们设置了一个 provide: name，值为 '浪里行舟'，它的作用就是将 name 这个变量提供给它的所有子组件。而在 B.vue 中，通过 inject 注入了从 A 组件中提供的 name 变量，那么在组件 B 中，就可以直接通过 this.name 访问这个变量了，它的值也是 '浪里行舟'。这就是 provide / inject API 最核心的用法。
需要注意的是：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的----vue官方文档
所以，上面 A.vue 的 name 如果改变了，B.vue 的 this.name 是不会改变的，仍然是 '浪里行舟'。
provide 与 inject 怎么实现数据响应式
一般来说，有两种办法：
provide祖先组件的实例，然后在子孙组件中注入依赖，这样就可以在子孙组件中直接修改祖先组件的实例的属性，不过这种方法有个缺点就是这个实例上挂载很多没有必要的东西比如props，methods等- 使用 2.6 最新 API Vue.observable 优化响应式
provide(推荐)
我们来看个例子：孙组件 D、E 和 F 获取 A 组件传递过来的 color 值，并能实现数据响应式变化，即 A 组件的 color 变化后，组件 D、E、F 会跟着变（核心代码如下：）
// A 组件
<div>
<h1>A 组件</h1>
<button @click="() => changeColor()">改变color</button>
<ChildrenB />
<ChildrenC />
</div>
......
data() {
return {
color: "blue"
};
},
// provide() {
// return {
// theme: {
// color: this.color //这种方式绑定的数据并不是可响应的
// } // 即A组件的color变化后，组件D、E、F不会跟着变
// };
// },
provide() {
return {
theme: this//方法一：提供祖先组件的实例
};
},
methods: {
changeColor(color) {
if (color) {
this.color = color;
} else {
this.color = this.color === "blue" ? "red" : "blue";
}
}
}
// 方法二:使用2.6最新API Vue.observable 优化响应式 provide
// provide() {
// this.theme = Vue.observable({
// color: "blue"
// });
// return {
// theme: this.theme
// };
// },
// methods: {
// changeColor(color) {
// if (color) {
// this.theme.color = color;
// } else {
// this.theme.color = this.theme.color === "blue" ? "red" : "blue";
// }
// }
// }// F 组件
<template functional>
<div class="border2">
<h3 :style="{ color: this.theme.color }">F 组件</h3>
</div>
</template>
<script>
export default {
inject: ["theme"]
// inject: {
// theme: {
// from: theme,
// //函数式组件取值不一样
// default: () => ({})
// }
// }
};
</script>$parent/$children 与 ref
ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例$parent/$children：访问父 / 子实例
需要注意的是：这两种都是直接得到组件实例，使用后可以直接调用组件的方法或访问数据。我们先来看个用ref来访问组件的例子：
// component-a 子组件
export default {
data () {
return {
title: 'Vue.js'
}
},
methods: {
sayHello () {
window.alert('Hello');
}
}
} // 父组件
<template>
<component-a ref="comA"></component-a>
</template>
<script>
export default {
mounted () {
const comA = this.$refs.comA;
console.log(comA.title); // Vue.js
comA.sayHello(); // 弹窗
}
}
</script>这两种方式很明显的弊端是无法跨级或在兄弟组件中通信我们想在 component-a 中，访问到引用它的页面中（这里就是 parent.vue）的两个 component-b 组件，那这种情况下，就得配置额外的插件或工具了，比如 Vuex 和 Bus 的解决方案。
// parent.vue
<component-a></component-a>
<component-b></component-b>
<component-b></component-b>
到这里组件传值就撒花了，作为前端人大家都要加油哦
扫一扫
620
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
