父子、全局传值、路由传参、本地传值、vuex传值（简）

一、全局

//传
this.$bus.$emit('aaaa', '');
//收
 this.$bus.$on('aaaa', (data)=>{
      console.log(data)
     });

注：通过$bus+$emit/$on传/收

二、父---》子

//父传
<zi :fa-msg="msg"></zi> <!-- 子组件绑定faMsg变量,注意驼峰-->
data () {
    return { 
         msg: '父组件数据',   
        } 
           },
//子收
{{faMsg}}
props:['faMsg'],//接收psMsg值

注：父组件传值需要注意驼峰命名法

三、子----》父

//父收
<zi @transfer="getUser"></zi>
methods:{ 
    getUser(msg){
        console.log(data) 
        } 
                }
//子传
this.$emit('transfer','子组件数据')//触发transfer方法，为向父组件传递的数据

注：父组件收值需要注意方法名一致

四、路由传参

//主页面
data () {
    return { 
         name: '张三',   
         id: '123456789',   
        } 
           },
this.$router.push(`/home/home?id=${this.id}&&name=${this.name}`)
//副页面
data () {
    return { 
         name: '',  //默认为空   
         id: '',   //默认为空 
        } 
           },
        this.id=this.$route.query.id
      this.name=this.$route.query.name

注：路由传参时，参数直接暴露在外，并使用的是``,不是''

五、本地传值

data () {
    return { 
       datalist:{
         name: 'user',     
         id: '1',   
       },
       userlist:{}
        } 
           },
//数组对象存取
localStorage.setItem("user", JSON.stringify(this.datalist));
this.userlist=JSON.parse(localStorage.user)

五、vuex传值

//最简单的，不建议使用，可以对vuex进行配置
this.$store.state.userData.name='张三'  //存
this.$store.state.userData.name        //取