文章目录
一、props+$emit
相信熟悉vue的同学对此种传值方式并不陌生，也是我们最常用的传值方式，父传子props,子传父$emit
二、attrs和listeners
Vue_2.4 中新增的 a t t r s / attrs/ attrs/listeners 可以进行跨级的组件通信。这两种最常见的应用场景就是用来封装第三方的组件库，比如我想封装一层element，难道我要把element的那个组件都要在props中定义一遍吗？ $attrs 包含了父级作用域中不作为 prop 的属性绑定（class 和 style 除外），好像听起来有些不好理解？没事，看下代码就知道是什么意思了：
<!-- 父组件 -->
<son msg="这是parent传来的信息"
list="list"
item="item"
@sonChange="fn" />
-------------------------------------------------------------
<!--子组件 -->
props: {
msg: String
},
created() {
console.log(this.$attrs);//{item: "item",list: "list"}
}
三、provide和inject
provide/inject允许一个祖先组件像向它所有的后代组件注入一个依赖，让所有改祖先组建的后代组件都能够访问到此依赖，依赖可以是属性和方法，上面的(attrs和listeners)还有(provide和inject)是两种属性透传的方式。
//父组件
export default {
name: 'parent',
components: {
son,
},
provide() {
return {
detail: {
msg: this.obj,
change: () => {
console.log('变了')
},
},
}
},
data() {
return {
obj: {
msg: '这是祖先组件要注入的依赖',
},
}
},
methods: {},
}
//子组件
export default {
name: 'son',
inject: ['detail'],
created() {
console.log(this.detail.msg.msg="我改变了")
},
}
四、EventBus
上面的三种方法都是子传父，父传子，如果兄弟组件传值或者任意两种组件传值应该怎么办呢？就是EventBus,利用 Vue 实例实现一个 EventBus 进行信息的发布和订阅，可以实现在任意2个组件之间通信。
// main.js
Vue.prototype.$eventBus = new Vue()
------------------------------------------
// 需要订阅的地方
this.$eventBus.$on('update', val => {})
// 需要发布信息的地方
this.$eventBus.$emit('update', '更新信息')
//移除事件监听
this.$eventBus.$off('update', {})
这种组件通信方式只要订阅和发布的顺序得当，且事件名称保持唯一性，理论上可以在任何 2 个组件之间进行通信，相当的强大。但是方法虽好，可不要滥用，建议只用于简单、少量业务的项目中，如果在一个大型繁杂的项目中无休止的使用该方法，将会导致项目难以维护。
五、Vuex
vuex想必大家都知道吧，这里就不多介绍了附上Vux官网的链接
六、Vue.observable
官网上说，如果你的项目不大建议不要使用vuex,可以使用Vue.observable来实现一个小型的状态管理器。原理很简单
// store.js
import Vue from 'vue'
export const state = Vue.observable({
count: 0,
})
export const mutations = {
increment() {
state.count++
}
decrement() {
state.count--
}
}
<!-- parent.vue -->
<template>
<p>{{ count }}</p>
</template>
<script>
import { state } from '../store'
export default {
computed: {
count() {
return state.count
}
}
}
</script>
// child.vue
import { mutations } from '../store'
export default {
methods: {
handleClick() {
mutations.increment()
}
}
}