vue-cli组件传值的几种方式

Vue开发中你可能经常需要父子传参之类的：

一．父传子

1.父传子：<blog-post title="hello!">

子接收：props: ['title']

-----------------------------------------------

2.父传子：<blog-post :title="hello">

Data(){

      hello:666

}

子接收(给值设置验证及默认值)：

props: {

    hello: {

      type:Number,

      default: 100

    },

}

二．子传父

父：<my-component @:my-event="doSomething">

methods:{

   doSomething (val) {

     console.log(val); //666

   }

}

子组件：子调父自定义事件：this.$emit('myEvent'，666);

-----------------------------------------------------

看到这里肯定有人问了，你这就翻译个文档吗，还不如查API !

那么如果是在vue-cli里子传爷爷呢，传兄弟呢传不知多少层咋掉，估计有一大堆人懵逼。。。

大招

解决方案：

1.用vuex里的方法能全局调用。

（注释：真正用完之后发现好麻烦呢啊有木有，所以不写了。。。哈哈哈）

2.暴力解决法，简单好用。

1.新建一个dome.js文件

import Vue from 'vue'

export default new Vue();

2.在需要传值得页面引入(调用方和接收方都要引入哦)

import vm from "@/js/dome.js";

3.爷爷页面等需要监听值的页面

import vm from "@/js/dome.js";

vm.$on(“test”,(msg)=>{

  console.log(msg); //666

});

4.孙子等需要传值的页面

import vm from "@/js/dome.js";

vm.$emit('test', 666);

结语：是不是很简单很方便，当然有时候传值会遇到传的值被改变等现象，这是因为js对象是引用值得地址所以一个值的改变会改变相关引用的值，直接 var obj=JSON.panse(JSON.stringify(obj));就可以复制个对象了，当然如果是浅复用直接 let obj={…obj}就可以了，es6还是很爽的。