vue中组件之间的传参

1、父子组件传值

1. 父传子

 2.父子件写法

注意：如果想传递动态值:

2.子组件向父组件传值

1.子组件

2.父组件

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

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

在组件里通过 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) ;

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="" />