Vue 总结:组件间的通讯方式(父子传参、兄弟传参、任意两个组件间传参、多个组件嵌套传参)

Vue 总结:组件间的通讯方式(父子传参、兄弟传参、任意两个组件间传参、多个组件嵌套传参)

Vue的通讯的方式:

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. 事件总线 EventBus (常用任意两个组件之间通讯)

原理:注册的事件存起来,等触发事件时再调用。定义一个类去处理事件,并挂载到Vue实例的this上即可注册和触发事件,也可拓展一些事件管理

class Bus {
  constructor () {
    this.callbackList = {}
  }

  $on (name, callback) {
    // 注册事件
    this.callbackList[name] ? this.callbackList[name].push(callback) : (this.callbackList[name] = [callback])
  }

  $emit (name, args) {
    // 触发事件
    if (this.callbackList[name]) {
      this.callbackList[name].forEach(cb => cb(args))
    }
  }
}

Vue.prototype.$bus = new Bus()

// 任意两个组件中
// 组件一:在组件的 mounted() 去注册事件
this.$bus.$on('confirm', handleConfirm)

// 组件二:触发事件(如:点击事件后执行触发事件即可)
this.$bus.$emit('confirm', list)


3. Vuex 状态管理(vue的核心插件、用于任意组件的任意通讯,需注意刷新后有可能vuex数据会丢失)

创建全局唯一的状态管理仓库(store),有同步(mutations)、异步(actions)的方式去管理数据,有缓存数据(getters),还能分成各个模块(modules)易于维护,详细可访问下方Vuex文档学习

vuex.vuejs.org/zh/

4. $parent / $root / $children (不推荐使用,不易于后期维护,一旦页面层次发生变化,就需要重新考虑层级关系)

以父组件为桥梁去注册事件和触发事件来实现的兄弟组件通讯

// 子组件一:
this.$patent.$on('confirm', handleConfirm)
// 子组件二:
this.$patent.$emit('confirm', list)

获取第一个子组件的数据和调用根组件的方法

// 获取第一个子组件的数据
console.log(this.$children[0].msg)

// 调用根组件的方法
this.$root.handleRoot()

5. $ref (引用的方式获取子节点)

常用于父组件调用子组件的方法(如:列表数据变化通知子组件重新渲染列表等) Vue提供了 $refs 来存储当前所有设置了 ref 属性的组件 PS:因为需要渲染完才能获取到 ref 属性,所以建议在mounted后去调用,否则有可能会获取不到 PS:如果定义了两个相同名字的ref则会 this. $refs.XXX将会是一个数组

// 在template中
// ...
<hello-world ref="hello"></hello-world>
// ...
export default {
  mounted(){
    // 调用引用的子组件的方法
    this.$refs.hello.handleRef()
  }
}

6. $attrs / $listeners(常用于对原生组件的封装)

$attrs 可以获取父组件传进来但没有通过props接收的属性

// 父组件
<Child :title="title" :desc="desc" >/>

//  子组件内
<template>
<div>
  <h2>{{title}}</h2>
  <p>{{$attrs.desc}}</p>
</div>
</template> 
<script>
export default {
  props: ['title']
  // ...
}
<script>


$listeners 会展开父组件的所有监听的事件(click事件等)常用于更高层级的封装 举个例子(需求):一个页面中有两个组件的点击事件触发方法是一样的"

//  父组件
<div>
  <child-first @click="handleClick"></child-first>
  <child-second @click="handleClick"></child-second>
</div>
export default {
  methods: {
    handleClick: (){
      alert('hello')
    }
  }
}

// child-first
<div v-on="$listeners"></div>

// child-second
<div v-on="$listeners"></div>

7. provide / inject (祖先及其后代传值)

常用一些多个组件嵌套封装,一个顶层组件内部的后代组件需要用到顶层组件的数据就使用这种方式

//  顶层组件
export default {
  provide(){
    return {
      msg: 'hello world!'
    }
  }
}

//  后代组件
export default {
  inject: ['msg']
}

原文链接:juejin.im

上一篇:如何使用React Hooks请求数据并渲染
下一篇:Electron入门篇

相关推荐

  • 🚩Vue源码——组件是如何注册的

    最近参加了很多场面试,几乎每场面试中都会问到Vue源码方面的问题。在此开一个系列的专栏,来总结一下这方面的经验,如果觉得对您有帮助的,不妨点个赞支持一下呗。 前言 在上一篇 🚩Vue源码——组件...

    1 个月前
  • 🚩Vue源码——组件如何渲染成最终的DOM

    最近参加了很多场面试,几乎每场面试中都会问到Vue源码方面的问题。在此开一个系列的专栏,来总结一下这方面的经验,如果觉得对您有帮助的,不妨点个赞支持一下呗。 前言 Vue有两个核心思想,一个是数据...

    1 个月前
  • 🍊仿Element自定义Vue组件库

    前言 🍊 市面上目前已有各种各样的UI组件库,他们的强大毋庸置疑。但是有时候我们有必要开发一套属于自己团队的定制化组件库。还有时候原有的组件不能满足我们的各种需求,就需要在原有的组件上进行改造...

    3 个月前
  • 🌈 React 函数式组件优化

    1. React 性能优化思路 减少重新 render 的次数。 减少计算的量。主要是减少重复计算,对于函数式组件来说,每次 render 都会重新从头开始执行函数调用。

    1 个月前
  • (vue框架)为element组件赋初始值以后无法更改值得问题

    情况描述:组件未加载时已有初始值,mounted里面加载数据,赋值,渲染以后,组件无法更改内容 data里面已经有这个表单对象的初始值但还是无法修改,之前有过一次,没有给表单绑定对象,所以赋值以后无法...

    1 年前
  • 魔方实时通信一对一音视频组件

    魔方实时通信/协作引擎(Web SDK)是一个全能力的实时云端协作引擎 魔方实时通信,请点击这个 继上一个im聊天组件增加了发动语音,语音视频通话功能 项目的源代码在这里 在线演示 项目结构如下: ...

    2 年前
  • 高阶组件之属性代理

    新组件类继承子React.component类,对传入的组件进行一系列操作,从而产生一个新的组件,达到增强组件的作用 操作props 访问ref 抽取state 封装组件 废话不多说,直接上代码:...

    2 年前
  • 高阶组件HOC - 小试牛刀

    1. 前言 老毕曾经有过一句名言,叫作“国庆七天乐,Coding最快乐~”。所以在这漫漫七天长假,手痒了怎么办?于是乎,就有了接下来的内容。。。 2. 一个中心 今天要分享的内容有关高阶组件的使用。

    2 年前
  • 高阶组件 + New Context API = ?

    1. 前言 继上次小试牛刀尝到高价组件的甜头之后,现已深陷其中无法自拔。。。那么这次又会带来什么呢?今天,我们就来看看【高阶组件】和【New Context API】能擦出什么火花! 2. New C...

    2 年前
  • 高阶函数&amp;&amp;高阶组件

    高阶函数 特点: 接受函数类型的参数。 返回值是函数。 高阶函数具有可扩展性。 常见的高阶函数: 定时器 setTimeout(); setInterval() Promise(); 数组相关:...

    8 个月前

官方社区

扫码加入 JavaScript 社区