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

bus.js代码

import Vue from 'vue'



var bus = new Vue();



export default bus;

兄弟组件一号

<template>

    <div class="child">

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

        <button @click="changeTwo">点击我改变2号的值</button>

    </div>

</template>



<script>

import Bus from "@/bus/bus"

export default {

    name: "Child",

    methods:{

        changeTwo(){

            Bus.$emit("changeName","可以选填的值")

        }

    },

};

</script>

兄弟组件二号

<template>

    <div class="child-two">

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

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

    </div>

</template>



<script>

import Bus from "@/bus/bus";

export default {

    name: "ChildTwo",

    data() {

        return {

            name: "uzi",

        };

    },

    mounted() {

        Bus.$on("changeName", (data) => { this.name = data });

    },

};

</script>

注：用bus传值，父组件引入子组件，子组件需要传值的用Bus. e m i t ( ) ， 接 收 方 用 B u s . emit()，接收方用 Bus. emit()，接收方用Bus.on()。

最后看效果图

改变后

四、VUEX传值

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

在使用VUEX时先弄懂几个概率。

VUEX是用来干嘛的？

答：vuex是一个状态管理工具存储应用所有组件的状态。

构成:

• state:vuex的基本数据，用来存储变量。

• mutations:提交更改数据，同步更新状态。

• actions:提交mutations，可异步操作。

• getters：是store的计算属性。

• modules:模块，每个模块里面有四个属性。

  用官网上的一张图来展示vuex工作的流程

  了解更多VUEX知识 可看官网What is Vuex?

实现的功能:有两个组件A和B，有一个公共的名字(默认为UZI)，想要使组件A改变名字，组件B名字也改变为一样的，组件B改变反之A也改变。

这是文件目录，为了方便后期管理将store下面新建文件夹与文件，每个文件管理一个或几个状态，这里name.js管理name

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组件

<template>

    <div>

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

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

        <div>

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

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

        </div>

    </div>

</template>



<script>

import { mapActions, mapGetters } from "vuex";

export default {

    name: "NameOne",

    data() {

        return {

            name: "JackLove",

        };

    },

    methods: {

        ...mapActions(

            ["changeNameOne"] //提交这个方法===this.$store.dispatch('changeNameTwo')

        ),

    },

    computed: {

        ...mapGetters(

            ["userName"] //计算属性===this.$store.getters.userName

        ),

    },

};

</script>

mapActions和mapGetters是vuex的语法糖

NameTwo组件

<template>

     <div>

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

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

        <div>

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

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

        </div>

    </div>

</template>



<script>

import { mapActions, mapGetters } from "vuex";

export default {

    name:"NameTwo",

    data() {

        return {

            name: "ClearLove",

        };

    },

    methods: {

        ...mapActions(

            ["changeNameTwo"] //提交这个方法===this.$store.dispatch('changeNameTwo')

        ),

    },

    computed: {

        ...mapGetters(

            ["userName"] //计算属性===this.$store.getters.userName

        ),

    },

}

</script>

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

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

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

PS：还可以这样传参

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

这样接收参数

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

这种有没有方便

五、Storage传值

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

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

先看页面

setStorage.vue组件

<template>

  <div>

      <input v-model="data" />

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

  </div>

</template>



<script>

export default {

    name:"setStorage",

    data(){

        return{

            data:""

        }

    },

    methods:{

        setData(){

            sessionStorage.setItem('myData',this.data)   //用来储存data数据，myData自定义的名字

        }

    },

}

</script>

getStorage.vue组件

<template>

  <div>

      <label>{{data}}</label>

      <button @click="getData()">点击我获取数据</button>

  </div>

</template>



<script>

export default {

    name:"getStorage",

    data(){

        return{

            data:""

        }

    },


### JavaScript 和 ES6



在这个过程你会发现，有很多 JS 知识点你并不能更好的理解为什么这么设计，以及这样设计的好处是什么，这就逼着让你去学习这单个知识点的来龙去脉，去哪学？第一，书籍，我知道你不喜欢看，我最近通过刷大厂面试题整理了一份前端核心知识笔记，比较书籍更精简，一句废话都没有，这份笔记也让我通过跳槽从8k涨成20k。

![JavaScript部分截图](https://img-blog.csdnimg.cn/img_convert/cac778dc45492a41e2f3e7cd6b0134e5.png)