Vue 父子组件通信 兄弟组件通信 深层组件通信 方式一览
时间:2022-07-22
本文章向大家介绍Vue 父子组件通信 兄弟组件通信 深层组件通信 方式一览,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
父子组件通信
简单来说就是利用回调函数获取value
- 直接传递属性
<Child :getChildValue="getChildValue" /> // 传递的是一个函数
Child组件里面可以使用 this.$attrs.getChildValue() 来调用
- 通过@方式传递
<Child @getChildValue="getChildValue" />
Child组件调用 this.$emit('getChildValue', value);
- 利用
$parent
和$children
相互通信 (官网不太支持你们这样搞,小心点)
this.$parent
获取父组件实例 可以使用父组件实例的属性
this.$children
获取子组件数组 可以利用下标调用子组件实例的属性
爷孙组件通信
- 爷孙组件之间是不能直接通信的,但可以构造成两个父子组件,通过父组件来传递数据
虽然不能通信,但是传递数据还是ok的
- provide + inject
这种数据传递并不是响应式的
provide: {
data: '父组件提供的数据'
},
// 在包裹的任何子组件中 都可以使用inject获取数据
Child组件
inject: ['data']
兄弟组件通信
场景:
<Child />
<Child1 />
- 简单粗暴的办法
Child
组件先传递给父组件,然后再由父组件传入Child1
这个组件,具体不多赘述 - Vuex这个后面会写文章,现在也不多说,但是是个解决方案
- Event Bus数据总线 创建公共类
主要就是利用一个公共的vue类 进行事件的分发,然后再利用这个类接收。
示例:
- 创建
bus.js
/**
* Created By 憧憬
*/
import Vue from 'vue';
export default new Vue;
- Child组件
<template>
<div class="Child">
<button @click="sendValue">传递给父组件</button>
</div>
</template>
<script>
import bus from '../../bus';
export default {
data(){
return {
value: 'child - value'
};
},
methods: {
sendValue() {
bus.$emit('sendChildValue', this.value);
}
}
};
</script>
- Child1组件
<template>
<div class="Child1">
<div>
child1
</div>
</div>
</template>
<script>
import bus from '../../bus';
export default {
props: {},
mounted() {
this.getValue(); // 在挂载阶段调用 函数 进行监听
},
beforeDestroy() { // 卸载取消
// 取消监听
bus.$off('sendChildValue');
},
methods: {
getValue() {
// 对应分发的键 接收到分发的数据
bus.$on('sendChildValue', value => {
console.log(value);
});
}
},
};
</script>
本文为作者原创,手码不易,允许转载,转载后请以链接形式说明文章出处。
- 教你 Debug 的正确姿势——记一次 CoreMotion 的 Crash
- Linux系统yum命令安装软件时保留(下载)rpm包
- Go语言读写数据库
- 《Android 创建线程源码与OOM分析》
- 微信 Android 视频编码爬过的那些坑
- 少年,这有套《街霸2》AI速成心法,想传授于你……
- 你知道android的MessageQueue.IdleHandler吗?
- 《Android基础:Fragment,看这篇就够了》
- Android 7.0中ContentProvider实现原理
- 《iOS APP 性能检测》
- iOS 11 安全区域适配总结
- Linux下巧用chattr、watch命令的实例
- 【特斯拉组件】iOS高性能PageController
- SUSE Linux系统在线安装软件命令zypper参数详解
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法