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还是很爽的。
网友评论