vue-组件通信(二)

​🌈个人主页:前端青山
🔥系列专栏:Vue篇
🔖人终将被年少不可得之物困其一生

依旧青山,本期给大家带来vue篇专栏内容:vue-组件通信(二)

目录

组件通信(二)

(1) props / $emit

1. 父组件向子组件传值

2. 子组件向父组件传值

(2)eventBus事件总线($emit / $on)

(3)依赖注入(provide / inject)

(3)ref / $refs

(4)$parent / $children

(5)$attrs / $listeners

(6)总结

组件通信(二)

组件通信的方式如下:

(1) props / $emit

父组件通过props向子组件传递数据,子组件通过$emit和父组件通信

1. 父组件向子组件传值
  • props只能是父组件向子组件进行传值,props使得父子组件之间形成了一个单向下行绑定。子组件的数据会随着父组件不断更新。

  • props 可以显示定义一个或一个以上的数据,对于接收的数据,可以是各种数据类型,同样也可以传递一个函数。

  • props属性名规则:若在props中使用驼峰形式,模板中需要使用短横线的形式

父组件
<template><div id="father"><son :msg="msgData" :fn="myFunction"></son></div>
</template>
​
<script>
import son from "./son.vue";
export default {name: father,data() {msgData: "父组件数据";},methods: {myFunction() {console.log("vue");}},components: {son}
};
</script>
复制代码
 子组件
<template><div id="son"><p>{{msg}}</p><button @click="fn">按钮</button></div>
</template>
<script>
export default {name: "son",props: ["msg", "fn"]
};
</script>
复制代码
2. 子组件向父组件传值
  • $emit绑定一个自定义事件,当这个事件被执行的时就会将参数传递给父组件,而父组件通过v-on监听并接收参数。

父组件
<template><div class="section"><com-article :articles="articleList" @onEmitIndex="onEmitIndex"></com-article><p>{{currentIndex}}</p></div>
</template>
​
<script>
import comArticle from './test/article.vue'
export default {name: 'comArticle',components: { comArticle },data() {return {currentIndex: -1,articleList: ['红楼梦', '西游记', '三国演义']}},methods: {onEmitIndex(idx) {this.currentIndex = idx}}
}
</script>
复制代码
子组件
<template><div><div v-for="(item, index) in articles" :key="index" @click="emitIndex(index)">{{item}}</div></div>
</template>
​
<script>
export default {props: ['articles'],methods: {emitIndex(index) {this.$emit('onEmitIndex', index) // 触发父组件的方法,并传递参数index}}
}
</script>
复制代码

(2)eventBus事件总线($emit / $on

eventBus事件总线适用于父子组件非父子组件等之间的通信,使用步骤如下: (1)创建事件中心管理组件之间的通信

// event-bus.js
​
import Vue from 'vue'
export const EventBus = new Vue()
复制代码

(2)发送事件 假设有两个兄弟组件firstComsecondCom

<template><div><first-com></first-com><second-com></second-com></div>
</template>
​
<script>
import firstCom from './firstCom.vue'
import secondCom from './secondCom.vue'
export default {components: { firstCom, secondCom }
}
</script>
复制代码

firstCom组件中发送事件:

<template><div><button @click="add">加法</button>    </div>
</template>
​
<script>
import {EventBus} from './event-bus.js' // 引入事件中心
​
export default {data(){return{num:0}},methods:{add(){EventBus.$emit('addition', {num:this.num++})}}
}
</script>
复制代码

(3)接收事件secondCom组件中发送事件:

<template><div>求和: {{count}}</div>
</template>
​
<script>
import { EventBus } from './event-bus.js'
export default {data() {return {count: 0}},mounted() {EventBus.$on('addition', param => {this.count = this.count + param.num;})}
}
</script>
复制代码

在上述代码中,这就相当于将num值存贮在了事件总线中,在其他组件中可以直接访问。事件总线就相当于一个桥梁,不用组件通过它来通信。

虽然看起来比较简单,但是这种方法也有不变之处,如果项目过大,使用这种方式进行通信,后期维护起来会很困难。

(3)依赖注入(provide / inject)

这种方式就是Vue中的依赖注入,该方法用于父子组件之间的通信。当然这里所说的父子不一定是真正的父子,也可以是祖孙组件,在层数很深的情况下,可以使用这种方法来进行传值。就不用一层一层的传递了。

provide / inject是Vue提供的两个钩子,和datamethods是同级的。并且provide的书写形式和data一样。

  • provide 钩子用来发送数据或方法

  • inject钩子用来接收数据或方法

在父组件中:

provide() { return {     num: this.num  };
}
复制代码

在子组件中:

inject: ['num']
复制代码

还可以这样写,这样写就可以访问父组件中的所有属性:

provide() {return {app: this};
}
data() {return {num: 1};
}
​
inject: ['app']
console.log(this.app.num)
复制代码

注意: 依赖注入所提供的属性是非响应式的。

(3)ref / $refs

这种方式也是实现父子组件之间的通信。

ref: 这个属性用在子组件上,它的引用就指向了子组件的实例。可以通过实例来访问组件的数据和方法。

在子组件中:

export default {data () {return {name: 'JavaScript'}},methods: {sayHello () {console.log('hello')}}
}
复制代码

在父组件中:

<template><child ref="child"></component-a>
</template>
<script>import child from './child.vue'export default {components: { child },mounted () {console.log(this.$refs.child.name);  // JavaScriptthis.$refs.child.sayHello();  // hello}}
</script>

(4)$parent / $children

  • 使用$parent可以让组件访问父组件的实例(访问的是上一级父组件的属性和方法)

  • 使用$children可以让组件访问子组件的实例,但是,$children并不能保证顺序,并且访问的数据也不是响应式的。

在子组件中:

<template><div><span>{{message}}</span><p>获取父组件的值为:  {{parentVal}}</p></div>
</template>
​
<script>
export default {data() {return {message: 'Vue'}},computed:{parentVal(){return this.$parent.msg;}}
}
</script>
复制代码

在父组件中:

// 父组件中
<template><div class="hello_world"><div>{{msg}}</div><child></child><button @click="change">点击改变子组件值</button></div>
</template>
​
<script>
import child from './child.vue'
export default {components: { child },data() {return {msg: 'Welcome'}},methods: {change() {// 获取到子组件this.$children[0].message = 'JavaScript'}}
}
</script>
复制代码

在上面的代码中,子组件获取到了父组件的parentVal值,父组件改变了子组件中message的值。 需要注意:

  • 通过$parent访问到的是上一级父组件的实例,可以使用$root来访问根组件的实例

  • 在组件中使用$children拿到的是所有的子组件的实例,它是一个数组,并且是无序的

  • 在根组件#app上拿$parent得到的是new Vue()的实例,在这实例上再拿$parent得到的是undefined,而在最底层的子组件拿$children是个空数组

  • $children 的值是数组,而$parent是个对象

(5)$attrs / $listeners

考虑一种场景,如果A是B组件的父组件,B是C组件的父组件。如果想要组件A给组件C传递数据,这种隔代的数据,该使用哪种方式呢?

如果是用props/$emit来一级一级的传递,确实可以完成,但是比较复杂;如果使用事件总线,在多人开发或者项目较大的时候,维护起来很麻烦;如果使用Vuex,的确也可以,但是如果仅仅是传递数据,那可能就有点浪费了。

针对上述情况,Vue引入了$attrs / $listeners,实现组件之间的跨代通信。

先来看一下inheritAttrs,它的默认值true,继承所有的父组件属性除props之外的所有属性;inheritAttrs:false 只继承class属性 。

  • $attrs:继承所有的父组件属性(除了prop传递的属性、class 和 style ),一般用在子组件的子元素上

  • $listeners:该属性是一个对象,里面包含了作用在这个组件上的所有监听器,可以配合 v-on="$listeners" 将所有的事件监听器指向这个组件的某个特定的子元素。(相当于子组件继承父组件的事件)

A组件(APP.vue):

<template><div id="app">//此处监听了两个事件,可以在B组件或者C组件中直接触发 <child1 :p-child1="child1" :p-child2="child2" @test1="onTest1" @test2="onTest2"></child1></div>
</template>
<script>
import Child1 from './Child1.vue';
export default {components: { Child1 },methods: {onTest1() {console.log('test1 running');},onTest2() {console.log('test2 running');}}
};
</script>
复制代码

B组件(Child1.vue):

<template><div class="child-1"><p>props: {{pChild1}}</p><p>$attrs: {{$attrs}}</p><child2 v-bind="$attrs" v-on="$listeners"></child2></div>
</template>
<script>
import Child2 from './Child2.vue';
export default {props: ['pChild1'],components: { Child2 },inheritAttrs: false,mounted() {this.$emit('test1'); // 触发APP.vue中的test1方法}
};
</script>
复制代码

C 组件 (Child2.vue):

<template><div class="child-2"><p>props: {{pChild2}}</p><p>$attrs: {{$attrs}}</p></div>
</template>
<script>
export default {props: ['pChild2'],inheritAttrs: false,mounted() {this.$emit('test2');// 触发APP.vue中的test2方法}
};
</script>

在上述代码中:

  • C组件中能直接触发test的原因在于 B组件调用C组件时 使用 v-on 绑定了$listeners 属性

  • 在B组件中通过v-bind 绑定$attrs属性,C组件可以直接获取到A组件中传递下来的props(除了B组件中props声明的)

(6)总结

(1)父子组件间通信

  • 子组件通过 props 属性来接受父组件的数据,然后父组件在子组件上注册监听事件,子组件通过 emit 触发事件来向父组件发送数据。

  • 通过 ref 属性给子组件设置一个名字。父组件通过 $refs 组件名来获得子组件,子组件通过 $parent 获得父组件,这样也可以实现通信。

  • 使用 provide/inject,在父组件中通过 provide提供变量,在子组件中通过 inject 来将变量注入到组件中。不论子组件有多深,只要调用了 inject 那么就可以注入 provide中的数据。

(2)兄弟组件间通信

  • 使用 eventBus 的方法,它的本质是通过创建一个空的 Vue 实例来作为消息传递的对象,通信的组件引入这个实例,通信的组件通过在这个实例上监听和触发事件,来实现消息的传递。

  • 通过 $parent/$refs 来获取到兄弟组件,也可以进行通信。

(3)任意组件之间

  • 使用 eventBus ,其实就是创建一个事件中心,相当于中转站,可以用它来传递事件和接收事件。

如果业务逻辑复杂,很多组件之间需要同时处理一些公共的数据,这个时候采用上面这一些方法可能不利于项目的维护。这个时候可以使用 vuex ,vuex 的思想就是将这一些公共的数据抽离出来,将它作为一个全局的变量来管理,然后其他组件就可以对这个公共数据进行读写操作,这样达到了解耦的目的。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/188826.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

简单漂亮的首页

效果图 说明 这个首页我也是构思了很久&#xff0c;才想出这个界面&#xff0c;大家喜欢的话&#xff0c;可以拿走去使用 技术的话&#xff0c;采用的就是vue的语法&#xff0c;但是不影响&#xff0c;很多样式我都是直接手敲出来的 代码实现 标语 <!-- 标语 start-->&…

图像分类系列(四) InceptionV2-V3学习详细记录

前言 上一篇我们介绍了Inception的原始版本和V1版本&#xff1a;经典神经网络论文超详细解读&#xff08;三&#xff09;——GoogLeNet学习笔记&#xff08;翻译&#xff0b;精读代码复现&#xff09; 这个结构在当时获得了第一名&#xff0c;备受关注。但InceptionV1是比较复…

​软考-高级-系统架构设计师教程(清华第2版)【第11章 未来信息综合技术(P384~P419)-思维导图】​

软考-高级-系统架构设计师教程&#xff08;清华第2版&#xff09;【第11章 未来信息综合技术&#xff08;P384~P419&#xff09;-思维导图】 课本里章节里所有蓝色字体的思维导图

鸿蒙开发|鸿蒙系统项目开发前的准备工作

文章目录 鸿蒙项目开发的基本流程介绍鸿蒙项目开发和其他项目有什么不同成为华为开发者-注册和实名认证1.登录官方网站 鸿蒙项目开发的基本流程介绍 直接上图&#xff0c;简单易懂&#xff01; 整个项目的开发通过4个模块进行&#xff1a;开发准备、开发应用、运行调试测试和发…

【计算思维】少儿编程蓝桥杯青少组计算思维题考试真题及解析D

STEMA考试-计算思维-U8级(样题) 21.下面哪个图形与其它图形不同&#xff1f;&#xff08; &#xff09; A. B. C. D. 22.下列哪个选项是由下图旋转得到的&#xff1f;&#xff08; &#xff09; A. B. C. D. 23.下面哪个图形是用4个 拼成的&#xff1f;&#xff08; &#xf…

剑指offer --- 用两个栈实现队列的先进先出特性

目录 前言 一、读懂题目 二、思路分析 三、代码呈现 总结 前言 当我们需要实现队列的先进先出特性时&#xff0c;可以使用栈来模拟队列的行为。本文将介绍如何使用两个栈来实现队列&#xff0c;并给出具体的思路和代码实现。 一、读懂题目 题目&#xff1a;用两个栈实现一…

Codeforces Round 909 (Div. 3)(A~G)(启发式合并)

1899A - Game with Integers 题意&#xff1a;给定一个数 , 两个人玩游戏&#xff0c;每人能够执行 操作&#xff0c;若操作完是3的倍数则获胜&#xff0c;问先手的人能否获胜&#xff08;若无限循环则先手的人输&#xff09;。 思路&#xff1a;假如一个数模3余1或者2&#…

基于SSM的项目管理系统设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用JSP技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…

C/C++疫情集中隔离 2021年12月电子学会青少年软件编程(C/C++)等级考试一级真题答案解析

目录 C/C疫情集中隔离 一、题目要求 1、编程实现 2、输入输出 二、算法分析 三、程序编写 四、程序说明 五、运行结果 六、考点分析 C/C疫情集中隔离 2021年12月 C/C编程等级考试一级编程题 一、题目要求 1、编程实现 A同学12月初从国外回来&#xff0c;按照防疫要…

SQL Server如何建表

一、数据表的组成 实现完整性的约束有&#xff1a; –6个约束 –非空 not null –主键 primary key –唯一 unique –检查 check –默认 default –主键自增 identity 表约束 主键约束&#xff1a;值不能为null,且不能重复 非空约束&#xff1a;不能为null 默认约束&#xf…

sqlite与mysql的差异

差异点 安装过程&#xff1a;MySQL服务器通常需要单独安装&#xff0c;这涉及下载适用于特定操作系统的MySQL安装程序&#xff0c;运行安装程序并按照指示完成安装过程。SQLite作为嵌入式数据库&#xff0c;可以直接使用其库文件&#xff0c;不需要单独的安装过程。 配置和管理…

SourceTree提示128错误

错误&#xff1a; SourceTree打开报错&#xff1a;git log 失败&#xff0c;错误代码128 错误截图&#xff1a; 解决方法&#xff1a; 第一种&#xff1a; 打开电脑路径 C:\Users\Administrator &#xff0c;删除下面的【.gitconifg】文件 第二种&#xff1a; 如果上述方法…