前端面试 vue 部分 (5)——VUE组件之间通信的方式有哪些
VUE组件之间通信的方式有哪些(SSS)
常见使用场景可以分为三类:
父子通信:
- null
父向子传递数据是通过props
,子向父是通过$emit / $on
$emit / $bus
Vuex
- 通过父链 / 子链也可以通信(
$parent
/$children
) ref
也可以访问组件实例
- null
兄弟通信:
$emit / $bus
Vuex
跨级通信:
$emit / $bus
;Vuex
;provide / inject API
$attrs/$listeners
$emit / $bus
// main.js
Vue.prototype.$bus = new Vue() // event Bus 用于无关系组件间的通信。
A触发B
// A
this.$bus.$emit('new-messsage-at-me', {
data: { conversationID: message.conversationID }
})
// B
mounted() {
this.$bus.$on('new-messsage-at-me', event => {
if (
event.data.conversationID === this.conversation.conversationID &&
this.conversation.conversationID !==
this.currentConversation.conversationID
) {
this.hasMessageAtMe = true
}
})
},
父子组件通信
- 父组件向子组件传值( props ):
//App.vue父组件
<template>
<div id="app">
<users v-bind:users="users"></users>//前者自定义名称便于子组件调用,后者要传递数据名
</div>
</template>
<script>
import Users from "./components/Users"
export default {
name: 'App',
data(){
return{
users:["Henry","Bucky","Emily"]
}
},
components:{
"users":Users
}
}
//users子组件
// 注:组件中的数据共有三种形式:data、props、computed
<template>
<div class="hello">
<ul>
<li v-for="user in users">{{user}}</li>//遍历传递过来的值,然后呈现到页面
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props:{
users:{ //这个就是父组件中子标签自定义名字
type:Array,
required:true
}
}
}
</script>
- 子组件向父组件传值(B 组件中 $emit, A 组件中 v-on ):
// 子组件
<template>
<header>
<h1 @click="changeTitle">{{title}}</h1>//绑定一个点击事件
</header>
</template>
<script>
export default {
name: 'app-header',
data() {
return {
title:"Vue.js Demo"
}
},
methods:{
changeTitle() {
this.$emit("titleChanged","子向父组件传值");//自定义事件 传递值“子向父组件传值”
}
}
}
</script>
// 父组件
<template>
<div id="app">
<app-header v-on:titleChanged="updateTitle" ></app-header>//与子组件titleChanged自定义事件保持一致
// updateTitle($event)接受传递过来的文字
<h2>{{title}}</h2>
</div>
</template>
<script>
import Header from "./components/Header"
export default {
name: 'App',
data(){
return{
title:"传递的是一个值"
}
},
methods:{
updateTitle(e){ //声明这个函数
this.title = e;
}
},
components:{
"app-header":Header,
}
}
</script>
$ref 与 $parent $children
- 使用 this.$parent查找当前组件的父组件。
- 使用 this.$children查找当前组件的直接子组件,可以遍历全部子组件, 需要注意 $children 并不保证顺序,也不是响应式的。
- 使用 this.$root查找根组件,并可以配合$children遍历全部组件。
- 使用 this.$refs查找命名子组件( )( this.$refs.one )
$attrs / $listeners
- 两者的出现使得组件之间跨组件的通信在不依赖 vuex 和事件总线的情况下变得简洁,业务清晰。
- A->B->C 多级组件嵌套需要传递数据时,通常使用的方法是通过vuex。如果仅仅是传递数据,而不做中间处理,使用 vuex 处理,未免有点杀鸡用牛刀。Vue 2.4 版本提供了另一种方法,使用 v-bind=”$attrs”, 将父组件中不被认为 props特性绑定的属性传入子组件中,通常配合 interitAttrs 选项一起使用。
- 简单来说:$attrs 与 $listeners 是两个「对象」,$attrs 里存放的是父组件中绑定的非 Props 属性, 唯一缺点 没在props定义的属性 会显示在生成的html标签上, 解决办法:通过inheritAttrs:false,避免顶层容器继承属性; $listeners里存放的是父组件中绑定的非原生事件。
A父组件
<template>
<div>
<child-dom
:foo="foo"
:coo="coo"
v-on:upRocket="reciveRocket"
>
</child-dom>
</div>
</template>
<script>
import childDom from "@/components/ChildDom.vue";
export default {
name:'demoNo',
data() {
return {
foo:"Hello, world",
coo:"Hello,rui"
}
},
components:{childDom},
methods:{
reciveRocket(){
console.log("reciveRocket success")
}
}
}
</script>
B子组件
<template>
<div>
<p>foo:{{foo}}</p>
<p>attrs:{{$attrs}}</p>
<childDomChild v-bind="$attrs" v-on="$listeners"></childDomChild>
</div>
</template>
<script>
import childDomChild from './childDomChild';
export default {
name:'child-dom'
props:["foo"],
inheritAttrs:false,
}
</script>
C子组件的子组件
<template>
<div>
<p>coo:{{coo}}</p>
<button @click="startUpRocket">我要发射火箭</button>
</div>
</template>
<script>
export default {
name:'childDomChild',
props:['coo'],
methods:{
startUpRocket(){
this.$emit("upRocket");
console.log("startUpRocket")
}
}
}
</script>
provide / inject
- 适用于 隔代组件通信 祖先组件中通过 provider 来提供变量,然后在子孙组件中通过 inject 来注入变量。 provide / inject API 主要解决了跨级组件间的通信问题,不过它的使用场景,主要是子组件获取上级组件的状态,跨级组件间建立了一种主动提供与依赖注入的关系。
- 如果是单一的只是拿数据使用,在父组件定义,则在所有子组件都能为之所用
- 官网不建议在应用中直接使用该办法,理由很直接:他怕你"管不好"
1.一般情况使用都是在app.vue配置为:
provide () {
return {
isTest: this
}
},
2.所有子组件都可以引用 拿到app.vue里面的所有数据
inject: ['isTest'],
欢迎留言~~~
前端面试 vue 部分 (5)——VUE组件之间通信的方式有哪些的更多相关文章
- Vue.js 父子组件之间通信的方式
Vue 父子组件之间的同学有一下几种方式: 1. props 2. $emit -- 组件封装用的比较多 3. .sync -- 语法糖 4. $attrs 和 $listeners -- 组件封装用 ...
- React中组件之间通信的方式
一.是什么 我们将组件间通信可以拆分为两个词: 组件 通信 回顾Vue系列的文章,组件是vue中最强大的功能之一,同样组件化是React的核心思想 相比vue,React的组件更加灵活和多样,按照不同 ...
- vue组件之间通信传值
原文链接:https://blog.csdn.net/lander_xiong/article/details/79018737 我认为这位博主的这篇文章写的非常详细,通俗易懂, 我们这次的vue项目 ...
- 【Vue课堂】Vue.js 父子组件之间通信的十种方式
这篇文章介绍了Vue.js 父子组件之间通信的十种方式,不管是初学者还是已经在用 Vue 的开发者都会有所收获.无可否认,现在无论大厂还是小厂都已经用上了 Vue.js 框架,简单易上手不说,教程详尽 ...
- Vue 组件之间通信 All in One
Vue 组件之间通信 All in One 组件间通信 1. 父子组件之间通信 https://stackblitz.com/edit/vue-parent-child-commutation?fil ...
- vue组件之间通信总结(超详细)
组件通信在我们平时开发过程中,特别是在vue和在react中,有着举足轻重的地位.本篇将总结在vue中,组件之间通信的几种方式: props.$emit $parent.$children $attr ...
- vue单文件组件形成父子(子父)组件之间通信(vue父组件传递数据给子组件,子组件传递数据给父组件)
看了很多文章,官网文档也有看,对父子组件通信说的不是很明白:决定自己总结一下: vue一般都使用构建工具构建项目:这样每个组件都是单文件组件:而网上很多文章都是script标签方式映入vue,组件通信 ...
- Vue中组件间通信的方式
Vue中组件间通信的方式 Vue中组件间通信包括父子组件.兄弟组件.隔代组件之间通信. props $emit 这种组件通信的方式是我们运用的非常多的一种,props以单向数据流的形式可以很好的完成父 ...
- Vue – 基础学习(2):组件间 通信及参数传递
Vue – 基础学习(2):组件间 通信及参数传递
随机推荐
- python 设计模式专题(一):目录篇
一.创建型设计模式 1.工厂模式 2.建造者模式 3.原型模式 二.结构型设计模式(组合) 1.适配器模式 2.装饰器模式 3.外观模式 4.单例模式 5.mvc模式 6.代理模式 三.行为型设计模式 ...
- 机器学习实战基础(四十一):随机森林 (八)附录 Bagging vs Boosting
- 前端08 /jQuery标签操作、事件
前端08 /jQuery标签操作.事件 目录 前端08 /jQuery标签操作.事件 1.标签内文本操作 1.1 html标签元素中的所有内容 1.2 text 标签元素的文本内容 2.文档标签操作 ...
- python 面向对象专题(二):类的空间问题、类与对象之间的关系、类与类之间的关系
https://www.cnblogs.com/liubing8/p/11308127.html 目录 Python面向对象02/类的空间问题.类与对象之间的关系.类与类之间的关系 1. 类的空间问题 ...
- AI开发利器:HiLens Studio技术解读
摘要:传统的AI应用开发和部署意味着高成本和高门槛,借助HiLens Studio,AI应用开发和部署仅需要三步. 曾几何时, 在我们青春年少时, 当我们看到某篇AI的技术文章时, 心中总不免想要在一 ...
- 设计模式:factory method模式
核心:将实例的生成交给子类,父类中只定义生成实例的接口 理解:对比模板方法模式的思维非常类似,模板方法模式中的模板方法理解成创造对象的抽象方法,不再是流程框架,就变成工厂方法模式,只是具体的方法是创建 ...
- HashMap源码实现分析
HashMap源码实现分析 一.前言 HashMap 顾名思义,就是用hash表的原理实现的Map接口容器对象,那什么又是hash表呢. 我们对数组都很熟悉,数组是一个占用连续内存的数据结构,学过C的 ...
- 05 . ELK Stack+Redis日志收集平台
环境清单 IP hostname 软件 配置要求 网络 备注 192.168.43.176 ES/数据存储 elasticsearch-7.2 内存2GB/硬盘40GB Nat,内网 192.168. ...
- DC-1靶机实战和分析
前言 我们都知道,对靶机的渗透,可以宽阔自己的解题思路,练习并熟悉相关操作命令,提高自己的能力.下面我就对Vulnhub的DC-1靶机进行渗透,靶机设置了5个flag,咱们依次找到它.并通过图文形式讲 ...
- vue学习(三) v-bind指令
//html <div id="app"> <input type="button" value="ok" v-bind: ...