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

持久化存储

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐