vue组件通信详解

常用的组件通信

1、父组件向子组件传值

1）在父组件的子组件标签上绑定一个属性，挂载要传输的变量
（2）在子组件中通过props来接受数据，props可以是数组也可以是对象，接受的数据可以直接使用 props:[“属性 名”] props:{属性名:数据类型}

2、子组件向父组件传值

1）在父组件的子组件标签上自定义一个事件，然后调用需要的方法
（2）在子组件的方法中通过 this.$emit(“事件”)来触发在父组件中定义的事件，数据是以参数的形式进行传递的

3、兄弟组件之间传值

（1）在src中新建一个Bus.js的文件，然后导出一个空的vue实例
（2）在传输数据的一方引入Bus.js 然后通过Bus.e m i t ( “ 事 件 名 ” , " 参 数 " ) 来 来 派 发 事 件 ， 数 据 是 以 emit(“事件名”,“参数”)来来派发事件，数据是以emit(“事件名”,“参数”)来来派发事件，数据是以emit()的参数形式来传递
（3）在接受的数据的一方 引入 Bus.js 然后通过 Bus.$on(“事件名”,(data)=>{data是接受的数据})

1、创建事件中心（eventBus）

/ 1. 创建事件中心
const eventBus = new Vue();
// 将创建出来的空的vue实例挂载Vue构造函数的原型上
Vue.prototype.eventBus = eventBus;

2、通过$emit(‘事件名’, ‘传递的参数’)方法派发一个自定义事件

this.eventBus.$emit('add', 5)

3、通过$on(‘事件名’, callback)方法在mounted生命周期函数中触发这个自定义事件

mounted() {
    this.eventBus.$on('add', (val) => {
        // code
    })
}

4、vuex传参

在需要传参的组件用生命周期created或methods通过commit方法来提交调用mumations中的方法需要传递两个参数第一个是调用mumations的方法，第二个参数是要传递的值

<script>
export default {
  data() {
    return {
      data: {
        name: "张三",
        age: 18,
        aex: "男",
      },
    };
  },
  created() {
    //   通过commit派发数据
    this.$store.commit("addUser", this.data);
  },
};
</script>

在vuex的mutations里调用adduser方法把数据存储在state

 state: {
    user:[]
  },
  mutations: {

   addUser(state,data){
    state.user=data
   }

在组件里通过 this.$store.state.user来获取state存储的数据

 this.$store.state.user;

5、本地存储通信

HTML5的本地存储API中的localStorage与sessionStorage在使用方法上是相同的，区 别在于sessionStorage在关闭页面后即被清空，而localStorage则会-直保存。 存储的内 容是以Json的形式存储的，JSON. parse()用于将一个JSON字符串转换为对象,

JSON. stringify()可以将对象转换为字符串。

sessionSorage:用于临时保存同一 口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据

localSorage:用于长久保存整 个网站的数据，保存的数据没有过期时间，直到手动去除。保存数据到本地

sessionStorage. setItem(' key')

JSON. stringify (value));localStorage. setItem(' key'，JSON. stringify (value));取得本地的数据:

let datal =JSON. parse (sessionStorage. getItem ('key' ));let data2 = JSON. parse(localStorage. g etItem(' key' )):

空全部数据:

sessionStorage. clear () localStorage. clear()

删除单个数据:

localStorage. removeItem (key) ;sessionStorage. removeItem(key) ;

得到某个索引的key:

localStorage. key (index) ;sessionStorage. key (index) ;

6、vue-router路由传参

点击当前页的某个按钮跳转到另外一个页面去，并将某个值带过去

<div class="examine" @click="details">详情页面</div>

第一种方法 页面刷新数据不会丢失

methods：{
  toDetails(id) {
       //直接调用$router.push 实现携带参数的跳转
        this.$router.push({
          path: `/details/${id}`,
        })
}

需要对应路由配置

{
     path: '/details/:id',
     name: 'details',
     component: details
   }

第二种方法 页面刷新数据会丢失

通过路由属性中的name来确定匹配的路由，通过params来传递参数

methods：{
  insurance(id) {
       this.$router.push({
          name: 'particulars',
          params: {
            id: id
          }
        })
  }

对应路由配置: 注意这里不能使用:/id来传递参数了，因为组件中，已经使用params来携带参数了。

 {
     path: '/particulars',
     name: 'particulars',
     component: particulars
   }

子组件中: 这样来获取参数

this.$route.params.id

7、全局变量传参

设置一个专用的的全局变量模块文件，模块里面定义一些变量初始状态，用export default 暴露出去，在main.js里面使用Vue.prototype挂载到vue实例上面或者在其它地方需要使用时，引入该模块便可。
Globle.js文件

示例如下

exports.install = function(Vue) {
  Vue.prototype.$target = "http://39.100.7.70:81/";
};

在需要的组件内直接使用：

  <img :src="'$target'+ item.imgPath" alt="" />

8、$parent和$children 传参

上面这张图片是vue官方的解释，通过$parent和$children就可以访问组件的实例，拿到实例代表什么？代表可以访问此组件的所有方法和data。接下来就是怎么实现拿到指定组件的实例。

// 父组件中
<template>
 <div class="hello_world">
 <div>{{msg}}</div>
 <com-a></com-a>
 <button @click="changeA">点击改变子组件值</button>
 </div>
</template>
 
<script>
import ComA from './test/comA.vue'
export default {
 name: 'HelloWorld',
 components: { ComA },
 data() {
 return {
  msg: 'Welcome'
 }
 },
 
 methods: {
 changeA() {
  // 获取到子组件A
  this.$children[0].messageA = 'this is new value'
 }
 }
}
</script>

// 子组件中
<template>
 <div class="com_a">
 <span>{{messageA}}</span>
 <p>获取父组件的值为: {{parentVal}}</p>
 </div>
</template>
 
<script>
export default {
 data() {
 return {
  messageA: 'this is old'
 }
 },
 computed:{
 parentVal(){
  return this.$parent.msg;
 }
 }
}
</script>

要注意边界情况，如在#app上拿$parent得到的是newVue()的实例，在这实例上再拿$parent得到的是undefined，而在最底层的子组件拿$children是个空数组。也要注意得到$parent和$children的值不一样，$children 的值是数组，而$parent是个对象

总结
上面两种方式用于父子组件之间的通信， 而使用props进行父子组件通信更加普遍; 二者皆不能用于非父子组件之间的通信。