Vue组件间通信方法总结(父子组件、兄弟组件及祖先后代组件间)

前言

除了使用 Vuex 方法外,vue 提供了各种各样的组件间通信的方案。文章整理一下父子组件、兄弟组件、祖先后代组件间是如何通信的。 💬

🌊 父子组件通信

props 和 $emit 父子组件通信

子组件有时需要与父组件进行沟通,沟通的方式就是子组件 emit 事件,父组件通过监听这个事件来做进一步动作。而父组件与子组件通信则使用 props

假设这里有一个父组件并引入了一个子组件 my-comp:

<my-comp v-for="msg in msgs" :key="msg.id" :msg="msg"></my-comp>

父组件有一系列 msg 数据需要通过子组件渲染,将 msg 作为 prop 传递给子组件即可:

import MyComp from '@/components/MyComp.vue'

export default {
 name: 'home',
 components: {
 MyComp
 },
 data () {
 return {
 msgs: [{
 id: 1, data: 'hello js'
 }, {
 id: 2, data: 'css world'
 }, {
 id: 3, data: 'animated style'
 }]
 }
 }
}

我们通过点击子组件每一项触发一个事件,父组件监听这个事件去动态改变子组件的 color 样式,这就是父组件监听子组件事件,事件处理函数可以从子组件传递值给父组件:

<my-comp v-for="msg in msgs" :key="msg.id" :msg="msg" :colored="colored" @handle-change-color="handleChangeColor"></my-comp>

首先增加一个事件 handle-change-color 当这个事件被触发时修改名为 color 的 data,然后将 colored 通过 props 传入到子组件:

import MyComp from '@/components/MyComp.vue'

export default {
 name: 'home',
 components: { // 注册组件
 MyComp
 },
 data () {
 return {
 colored: false, // 状态
 msgs: [{
 id: 1, data: 'hello js'
 }, {
 id: 2, data: 'css world'
 }, {
 id: 3, data: 'animated style'
 }]
 }
 },
 methods: {
 handleChangeColor () {
 this.colored = !this.colored // 监听事件动态改变 colored
 }
 // handleChangeColor (param) { // 子组件触发的事件可能包含参数
 }
}

然后编辑子组件:

<div>
 <div @click="handleClick" :style="{color}">
 {{msg.id}} - {{msg.data}} ⭕
 </div>
</div>

首先渲染数据,并监听 click 点击事件,当点击触发事件处理函数 handleClick

export default {
 name: 'MyComp',
 computed: {
 color () { // color 为样式
 return this.colored ? 'red' : 'black' // 根据父组件传入的 props 动态修改样式
 }
 },
 props: ['msg', 'colored'],
 methods: {
 handleClick (e) {
 this.$emit('handle-change-color') // 使用 $emit 方法触发父组件 handle-change-color 事件
 // this.$emit('handler', 'param') // 还可以给事件传递参数
 }
 }
}

子组件接收 colored 父组件传递来的 prop,返回一个计算后的属性 color,根据 colored 返回不同样式。handleClick 处理当子组件元素被点击时 $emit 派发父组件的 handle-change-color 事件

效果如下:

父组件 $children 操作子组件

使用 $children 操作子组件。如上述例子中,colored 被定义在父组件中,可以将其移动到子组件中,并在父组件通过 $children 访问到子组件:

<template>
 <div @click="handleClick" class="home">
 <my-comp v-for="msg in msgs" :key="msg.id" :msg="msg"></my-comp>
 </div>
</template>

handleClick 事件被放置在 div 中

import MyComp from '@/components/MyComp.vue'

export default {
 // ...
 data () {
 return {
 msgs: [{
  // ...
 }]
 }
 },
 methods: {
 handleClick () {
 this.$children.forEach(child => {
 child.$data.colored = !child.$data.colored // 逐一控制子组件的 $data
 })
 }
 }
}

在子组件中不需要 $emit 事件,只需维护一个 data:

export default {
 name: 'MyComp',
 data () {
 return {
 colored: false // colored 状态
 }
 },
 computed: {
 color () {
 return this.colored ? 'red' : 'black'
 }
 },
 props: ['msg']
}

子组件 $parent 访问父组件

子组件可通过 $parent 来修改父组件的 $data,因此 colored 定义在父组件中。

<template>
 <div class="home">
 <my-comp v-for="msg in msgs" :key="msg.id" :msg="msg" :colored="colored"></my-comp>
 </div>
</template>

通过 prop 传递 colored 参数给子组件

import MyComp from '@/components/MyComp.vue'

export default {
 name: 'home',
 components: {
 MyComp
 },
 data () {
 return {
 colored: false, // 父组件维护一个 colored 状态
 msgs: [{
  // ...
 }]
 }
 }
}

父组件定义 colored 状态

<template>
 <div>
 <div @click="handleClick" :style="{color}">
 {{msg.id}} - {{msg.data}} ⭕
 </div>
 </div>
</template>

子组件渲染 msg 并监听 click 事件

export default {
 // ...
 props: ['msg', 'colored'],
 methods: {
 handleClick (e) {
 this.$parent.$data.colored = !this.$parent.$data.colored
 }
 }
}

通过 $parent 访问父组件,并修改 $data 状态

非父子组件通信

中央事件总线

我们可以使用使用中央事件总线来处理非父子组件间的通信

具体步骤是创建一个 Vue 实例,然后 $on 监听事件,$emit 来派发事件

// src/eventBus.js

import Vue from 'vue'
export default new Vue()

首先创建并导出一个 Vue 实例

import bus from '@/eventbus'

export default {
 // ...
 methods: {
 handleClick (e) {
  bus.$emit('change-color')
 }
 }
}

后代元素 $emit 触发 eventBus 的事件

import bus from '@/eventbus'

export default {
 // ...
 mounted () {
 bus.$on('change-color', () => {
  this.colored = !this.colored
 })
 }
}

祖先元素 $on 方法监听 eventBus 的事件

provide/inject

适用于祖先和后代关系的组件间的通信,祖先元素通过 provide 提供一个值,后代元素则通过 inject 获取到这个值。这个值默认是非响应的,如果是对象那么则是响应式的:

export default {
 name: 'home',
 provide () {
 return {
  colored: this.colored // 依赖于 data
 }
 },
 components: {
 MyComp
 },
 data () {
 return {
  colored: { // 必须为对象
  value: false
  },
  msgs: [{
// ... 

首先通过 provide 对外提供一个 colored,这个属性依赖于 data 中的 colored,该变量必须为一个对象,才是响应式的。

⚠️ 必须为一个对象

 methods: {
 handleChangeColor () {
  this.colored.value = !this.colored.value
 }
 }

祖先组件监听事件或其他途径去修改 data 改变状态。

export default {
 name: 'MyComp',
 inject: ['colored'], // inject colored
 computed: {
 color () {
  return this.colored.value ? 'red' : 'black' // do more...
 }
 },
// ...

后代组件通过 inject 获取到祖先组件提供的对象,根据对象做进一步动作。

$root 直接访问根组件

根据官方的文档,我们可以通过 $root 来直接访问到 Vue 实例

比方说将数据存储在 Vue 实例中:

// src/main.js

new Vue({
 data () {
 return { // 在这里!!
  colored: false
 }
 },
 router,
 store,
 render: h => h(App)
}).$mount('#app')

然后我们在其他各个组件中都能够使用:

export default {
 name: 'MyComp',
 // ...
 mounted () {
 console.log(this.$root) // 直接访问到根组件
 },
 // ...
}

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对我们的支持。

(0)

相关推荐

  • vue 进阶之实现父子组件间的传值

    本章我们将深入了解一下组件,并实现父子组件间的传值. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head&g

  • vue两个组件间值的传递或修改方式

    1.可以用公共的父组件来实现: 2.可以在store.js里面在设置公共变量: 3.也可以用本地存储localStorage.setItem()和localStorage.getItem(),通过修改本地存储的值和获取修改后的值来实现: 4.就是父子组件间的值的传递与修改props,这里需要注意的是子组件里面不      能直接修改props里面接受的值,需要定义一个中间变量来接受props里的值并修改,通过$emit即this.$emit('checkDisplay',this.display

  • vue同步父子组件和异步父子组件的生命周期顺序问题

    关于vue组件的引入方式有两种 一. 同步引入 例子: import Page from '@/components/page' 二.异步引入 例子:const Page = () => import('@/components/page') 或者: const Page = resolve => require(['@/components/page'], page) 两种引入方式的不同之处在于: 同步引入时生命周期顺序为:父组件的beforeMount.created.beforeMoun

  • 详解vue父子组件关于模态框状态的绑定方案

    日常开发中经常遇到的一个场景,父组件有很多操作,需要弹窗,例如: <template> <div class="page-xxx"> //点击打开新增弹窗 <button>新增</button> //点击打开编辑弹窗 <button>编辑</button> //点击打开详情弹窗 <button>详情</button> <Add :showAdd="false">

  • 深入理解Vue父子组件生命周期执行顺序及钩子函数

    先附一张官网上的vue实例的生命周期图,每个Vue实例在被创建的时候都需要经过一系列的初始化过程,例如需要设置数据监听,编译模板,将实例挂载到DOM并在数据变化时更新DOM等.同时在这个过程中也会运行一些叫做生命周期钩子的函数(回调函数),这给了用户在不同阶段添加自己代码的机会. 1.vue的生命周期图 在vue实例的整个生命周期的各个阶段,会提供不同的钩子函数以供我们进行不同的操作.先列出vue官网上对各个钩子函数的详细解析. 生命周期钩子 生命周期钩子 详细 beforeCreate 在实例

  • 简单了解vue中父子组件如何相互传递值(基础向)

    前言 首先,你需要知道vue中父组件和子组件分别指的是什么? 父组件:vue的根实例--用new Vue()构造函数创建的vue实例(实例会有一个挂载点,挂载点里的所有内容可理解为父组件的内容) 这里以root为挂载点,root里包含的所有内容可称为模板,即我们常说的父组件 子组件:用Vue.component()注册的组件(下图todo-item就是组件的名称,该名称可自定义,推荐使用短横线分隔命名) 定义组件名的2种方式(截图截自vue官网) 注:建议在html中引用组件时(非字符串模板),

  • Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)

    Vue2.0 传值方式: 在Vue的框架开发的项目过程中,经常会用到组件来管理不同的功能,有一些公共的组件会被提取出来.这时必然会产生一些疑问和需求?比如一个组件调用另一个组件作为自己的子组件,那么我们如何进行给子组件进行传值呢?如果是电商网站系统的开发,还会涉及到购物车的选项,这时候就会涉及到非父子组件传值的情况.当然你也可以用Vuex状态管理工具来实现,这部分我们后续会单独介绍.我先给大家介绍Vue开发中常用的三种传值方式. Vue常用的三种传值方式有: •父传子 •子传父 •非父子传值 引

  • Vue组件间通信方法总结(父子组件、兄弟组件及祖先后代组件间)

    前言 除了使用 Vuex 方法外,vue 提供了各种各样的组件间通信的方案.文章整理一下父子组件.兄弟组件.祖先后代组件间是如何通信的.

  • vue父子组件的通信方法(实例详解)

    一.父组件向子组件传递数据 1.首先形成父子组件关系 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="../js/vue.js"></script> </head> <body>

  • vuejs中父子组件之间通信方法实例详解

    本文实例讲述了vuejs中父子组件之间通信方法.分享给大家供大家参考,具体如下: 一.父组件向子组件传递消息 // Parent.vue <template> <div class="parent"> <v-child :msg="message"></v-child> </div> </template> <script> import VChild from './child.v

  • vue组件间通信六种方式(总结篇)

    前言 组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.一般来说,组件可以有以下几种关系: 如上图所示,A 和 B.B 和 C.B 和 D 都是父子关系,C 和 D 是兄弟关系,A 和 C 是隔代关系(可能隔多代). 针对不同的使用场景,如何选择行之有效的通信方式?这是我们所要探讨的主题.本文总结了vue组件间通信的几种方式,如props. $emit / $on .vuex. $parent / $children . $attrs

  • Vue组件通信方法案例总结

    目录 一.父组件向子组件传值(props) 二.子组件向父组件传值($emit) 三.兄弟组件传值(EventBus) 1. 初始化(new Vue()) 2. 发送事件($emit()) 3. 接收事件($on()) 4. 移除事件监听者 四.Vuex 一.父组件向子组件传值(props) 步骤: 在父组件中通过 v-bind 将数据传给子组件 在子组件中通过 props 接收父组件传递过来的数据 <div id="app"> <!-- 1.通过 v-bind 将数

  • Vue常见组件间通信方案及典型应用场景详解

    目录 什么是组件通信 1.父子组件通信场景 2.兄弟组件通信场景 3.根组件和后代组件通信场景 4.插槽通信场景 5 无直接关系的组件通信场景 6 大型项目中的复杂组件通信场景 - Vuex状态管理 7 其他的一些组件通信方案 总结 什么是组件通信 所谓组件通信,就是组件之间的数据交互,也就是把一个组件A里面的数据传递到另一个组件B,并能够让组件B根据这个数据更新界面. 在 Vue中,可用的通信方案有很多,下面给大家描述几个常用的组件通信方案及其典型的应用场景. 1.父子组件通信场景 父子组件通

  • 详解Angualr 组件间通信

    Angualr 组件间通信 约定: 遵循Angular官方的说法,下文中的AngularJS代指1.x版本,Angular代指Angular2及以后的升级版本. 采用Angular(或者任意MV*)的前端框架开发单页应用(SPA)时,我们都可能会遇见如下的场景: A组件和B组件之前需要相互通信,或是A路由状态需要知道B路由状态的信息等等业务需求. 这个时候就需要设计到采用一套合理的通信方案来解决数据同步,数据通信的问题. AngularJS 组件间的数据通信 在AngularJS中,也就是Ang

  • Angular ViewChild组件间通信demo

    目录 - ViewChild 通过ViewChild调用一个方法 - ViewChild 这篇文章是Angular中组件间通信系列的一部分.虽然你可以从任何地方开始,但最好还是从头开始,对吗? 我们现在进入了Angular中组件间交流的最后一个方法.这是一个我不确定是否真的应该写出来的方法.你看,在我看来,使用ViewChild来让组件之间相互交流,是最后的手段.它不是那种反应式的,而且经常遇到各种竞赛条件,因为你没有使用像EventEmitters和数据绑定这样的东西,而是直接调用方法. 由于

  • keep-alive保持组件状态的方法

    keep-alive的设计初衷 有些业务场景需要根据不同的判断条件,动态地在多个组件之间切换.频繁的组件切换会导致组件反复渲染,如果组件包含有大量的逻辑和dom节点,极易造成性能问题.其次,切换后组件的状态也会完全丢失.keep-alive的设计初衷就是为了保持组件的状态,避免组件的重复渲染. 为什么keep-alive可以直接使用 开发者无需注册和引入,直接可以在模板中使用. 跟开发者使用Vue.component自定义的组件不同,keep-alive无需注册,在模板中直接可以使用,如下所示:

  • Android线程间通信 Handler使用详解

    目录 前言 01.定义 02.使用 第一步.创建 第二步.发送消息 第一种是 post(Runnable) 第二种是 sendMessage(Message) 第三步.处理消息 03.结语 前言 Handler,可谓是面试题中的一个霸主了.在我<面试回忆录>中,几乎没有哪家公司,在面试的时候是不问这个问题的.简单一点,问问使用流程,内存泄漏等问题.复杂一点,纠其源码细节和底层 epoll 机制来盘你.所以其重要性,不言而喻了吧. 那么今天让我们来揭开 Handler 的神秘面纱.为了读者轻松易

随机推荐