vue传值之父子组件传值、bus传值、vuex传值…

    <Child @get-time="getTime" />

    <input v-model="data" />

    <p>{{ time }}</p>

</div>

效果图  

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

改变后  

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

详情可看官网[自定义事件]( )



关于父子组件传值遇到的坑可以看[vue修改父组件传值报错]( )



[]( )三、兄弟之间通过bus

========================================================================



父组件引入两兄弟

<div class="father">

    <Child />

    <ChildTwo />

</div>

兄弟组件二号

<div class="child-two">

    <h1>我是2号兄弟组件</h1>

    <p>{{ name }}</p>

</div>

注：用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)



[]( )四、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?]( )



实现的功能:有两个组件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

changeNameOne({ commit }, name) {

    return commit("changeNameOne", name)

},

changeNameTwo({commit }, name) {

    return commit("changeNameOne", name)

}

}

const getters ={ //计算属性

userName(state){

    return  state.userName

}

}

const mutations = { //同步的数据

changeNameOne(state, obj) {

    state.userName = obj

},

changeNameTwo(state, obj) {

    state.userName = obj

},

}

export default {

state,

actions,

getters,

mutations

}

NameOne组件

<div>

    <P class="title">组件A</P>

    <P class="titleName">名字：{{ userName }}</P>

    <div>

        <input v-model="name" placeholder="请输入名字" />

        <button @click="changeNameOne(name)">修改名字</button>

    </div>

</div>

mapActions和mapGetters是vuex的语法糖



NameTwo组件

 <div>

    <P class="title">组件B</P>

    <P class="titleName">名字：{{ userName }}</P>

    <div>

        <input v-model="name" placeholder="请输入名字" />

        <button @click="changeNameTwo(name)">修改名字</button>

    </div>

</div>

最后看效果图，当修改A组件的名字的时候  

![在这里插入图片描述](https://img-blog.csdnimg.cn/20210702150756935.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pldF9Mb3Zlcg==,size_16,color_FFFFFF,t_70)  

当修改B组件的名字的时候  

![在这里插入图片描述](https://img-blog.csdnimg.cn/20210702150842819.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pldF9Mb3Zlcg==,size_16,color_FFFFFF,t_70)



PS：最后再加了个组件C，看效果图  

![在这里插入图片描述](https://img-blog.csdnimg.cn/20210702151633490.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pldF9Mb3Zlcg==,size_16,color_FFFFFF,t_70)  

PS：还可以这样传参  

this.$store.commit(‘**name/changeNameOne**’,res) (**res**是需要传的参数)



这样接收参数  

this.$store.getters\[“**workStore/getToken**”\]  

这种有没有方便  

![请添加图片描述](https://img-blog.csdnimg.cn/08ef20a17cc8431395d12a1a94f76b42.gif)



[]( )五、Storage传值

========================================================================



新建两个文件分别为setStorage.vue和getStorage.vue，一个用来储存一个用来获取数据。由于**sessionStorage**、**localStorage**使用的方法一样这里用**sessionStorage**来做的示范。



先看页面  

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

setStorage.vue组件

  <input v-model="data" />

  <button @click="setData()">点击我分发数据</button>

# 最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

# 最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

[外链图片转存中…(img-nInTUaDB-1715692987582)]

[外链图片转存中…(img-FmSz2VQL-1715692987582)]

[外链图片转存中…(img-90WKCSFH-1715692987583)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！