1.常用的父子组件通讯方式:props,emit
父组件传入属性,子组件通过props来接收,在子组件中就可以用this.xxx方式使用。
子组件通过$emit(事件名,参数)向外弹出一个自定义事件,在父组件中的属性监听事件,可以获得子组件中传出来的值
// 父组件
<hello-world msg="hello world!" @confirm="handleConfirm"><hello-world>
// 子组件
props: {
msg: {
type: String,
default: ''
}
},
methods:{
handleEmitParent(){
this.$emit('confirm', list)
}
}
2.$parent,$children
通过 $parent,$children 来访问组件实例,进而去获取 或者 改变父子组件的值。 (仅限于父子组件之间,不推荐使用,因为不利于维护,一旦组件层次发生了变化,就需要更改其中的层次关系)
需要注意边界,最外层的#app 的$parent得到的是Vue实例,在Vue实例上再去取$parent 就是undefined了。 在最底层的组件中 $children是[]。
3.$ref
通过引用的方式获取子节点,常用于父组件中调用子组件的方法或者获取子组件的属性。
注意:如果绑在的是v-for的节点上,那么获取到的是一个数组。
4.provide/inject
依赖注入,常见于插件或者组件库里。
多个组件嵌套时,顶层组件provide提供变量,后代组件都可以通过inject来注入变量。
缺陷:传递的数据不是响应式的,inject接收到数据后,provide中的数据改变,但是后代组件中的数据不会改变。所以 建议传一些常量或者方法。
5.EventBus 事件总线 (任意两个组件通讯)
用 $emit去监听,用$on去触发,注意需要$off来取消监听,否则可能会造成内存泄漏。
6.$attrs、$listener
适用于多级组件嵌套,但是不做中间处理的情况。比如祖先组件向孙子组件传递数据。
$attrs 可以获取父组件传进来,但是没有用props接收的属性。
可以通过v-bind="$attrs"传入内部组件。
搭配inheritAttrs使用,这个只是用来控制attrs是否在DOM中渲染。
$listeners 包含父作用域中的(不包含.native的) v-on时间监听器。
可以通过v-on="$listeners"来传入内部组件。
7.Vuex 状态管理器
集中式存储管理所有组件的状态。
可以解决 多个视图依赖同一个状态 或者是 来自不同视图的行为需要变更同一个状态 的问题。
8.localStorage/sessionStorage
持久化存储。