vue传值之父子组件传值、bus传值、vuex传值、其他方式传值…_vue bus传值

前端面试题汇总

JavaScript

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

性能

linux

前端资料汇总

    <button @click="setTime">点击我获取父组件的方法</button>
</div>

父组件

效果图  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210531171250158.png)  
 改变后  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210531171320565.png)  
 详情可看官网[自定义事件](https://bbs.youkuaiyun.com/forums/4304bb5a486d4c3ab8389e65ecb71ac0)


在父组件向子组件传递数据时，若是该数据为对象或数组，并且该对象或数组在父组件内部被修改，则 Vue 不会检测到。这种情况下，我们需要在父组件中设置一个临时变量来保存修改后的对象或数组，并将其传递给子组件。


关于父子组件传值遇到的坑可以看[vue修改父组件传值报错](https://bbs.youkuaiyun.com/forums/4304bb5a486d4c3ab8389e65ecb71ac0)


## 三、兄弟之间通过bus


父组件引入两兄弟

兄弟组件二号

我是2号兄弟组件

{{ name }}

注：用bus传值，父组件引入子组件，子组件需要传值的用Bus. 
 
 
 
 
 e 
 
 
 m 
 
 
 i 
 
 
 t 
 
 
 ( 
 
 
 ) 
 
 
 ，接收方用 
 
 
 B 
 
 
 u 
 
 
 s 
 
 
 . 
 
 
 
 emit()，接收方用 Bus. 
 
 
 emit()，接收方用Bus.on()。  
 最后看效果图  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210531175006124.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pldF9Mb3Zlcg==,size_16,color_FFFFFF,t_70)  
 改变后  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210531175028356.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pldF9Mb3Zlcg==,size_16,color_FFFFFF,t_70)


 
## 四、其它方式传值传值


### 父孙传值


##### $attrs（向下）


官网是这么解释的  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/5a2316089f25423dac526030f1609132.png)  
 意思就是孙子组件的传值问题可以选择不使用props传值而通过$attrs传递


部分代码

//父组件

//子组件

//孙子组件

打印结果  
 ![请添加图片描述](https://img-blog.csdnimg.cn/e612fd2bd1484fd2aa2eaa4256fa4872.png)


##### $listeners（向上）


官网是这么解释的  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/a96f5e889e824b20bd72eb8a67f70aaf.png)  
 $listeners可以将孙组件的事件和参数传递给父组件

//父组件

<compOne
v-on=“$listeners”
@compOneChild=“compOneChild”/>

//子组件

//孙子组件

打印结果  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/2c8df91b77ac432991b740790adb9642.png)


### provide/inject


**官网概念**：  
 这对选项需要一起使用，以允许一个**祖先组件**向其**所有子孙**后代注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效。  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/21d5f450ad2f4c788dd0935bf2be41bf.png)  
 官网链接[provide / inject](https://bbs.youkuaiyun.com/forums/4304bb5a486d4c3ab8389e65ecb71ac0)


用法举例

//祖先组件（刚登陆首页的组件）
data() {
return {
userName: “李潇潇”,
};
},
provide() {
return {
newName: () => this.userName,
};
},
//子孙组件（随便跳转详情的组件）
inject: [“newName”],
mounted() {
console.log(this.newName());
console.log(this.userName());
},
methods: {
userName() {
return this.newName();
},
}

![在这里插入图片描述](https://img-blog.csdnimg.cn/b51cb3f438b84fdc8b8f9237be90bdb1.png)


最后看跳转子孙的打印值  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/de0b1cc5a8354fbb9fb1c1739df48c07.png)


### parent/children


官网是这么介绍的  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/53859db67d4e4fdf87b8781fe659f764.png)  
 所以尽量少用，了解一下就行了。


## 五、VUEX传值


在使用VUEX时先弄懂几个概率。  
 **VUEX是用来干嘛的？**  
 答：vuex是一个状态管理工具存储应用所有组件的状态。  
 构成:


* **state**:vuex的基本数据，用来存储变量。
* **mutations**:提交更改数据，同步更新状态。
* **actions**:提交mutations，可异步操作。
* **getters**：是store的计算属性。
* **modules**:模块，每个模块里面有四个属性。  
 用官网上的一张图来展示vuex工作的流程  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210702143655918.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pldF9Mb3Zlcg==,size_16,color_FFFFFF,t_70)了解更多VUEX知识 可看官网[What is Vuex?](https://bbs.youkuaiyun.com/forums/4304bb5a486d4c3ab8389e65ecb71ac0)


实现的功能:有两个组件A和B，有一个公共的名字(默认为UZI)，想要使组件A改变名字，组件B名字也改变为一样的，组件B改变反之A也改变。  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210702144542937.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pldF9Mb3Zlcg==,size_16,color_FFFFFF,t_70)  
 这是文件目录，为了方便后期管理将store下面新建文件夹与文件，每个文件管理一个或几个状态，这里name.js管理name  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210702145412104.png)  
 store下面的index.js代码

import Vue from ‘vue’
import Vuex from ‘vuex’

import name from ‘./name/name’

Vue.use(Vuex)

export default new Vuex.Store({
modules: {
name,
}
})

name.js代码

const state = { //基本数据，变量
userName: “UZI” //默认值
}
const actions = { //提交mutations

前端面试题汇总

JavaScript

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

性能

linux

前端资料汇总