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还是很爽的。