Vue2-组件通讯传值

Vue2组件通讯传值

方法

• Slot插槽--父向子内容分发,子组件只读
• mixin混入--定义公共变量或方法,mixin数据不共享,组件中mixin实例互不影响
• provide+inject--依赖注入,加强版prop+$emit ,代码可读性不高，不便后期维护
• prop+$emit--父往子,子往父
• route路由传参--简单数据传值
• ref传值-- 缺陷:ref不是响应式的,要在DOM渲染完后才会有,可以用$nextTick()解决
• $parent+$children-- 获取到整个组件实例的方法+数据
• $attrs+$listeners-- 实现多层嵌套传递,父子孙
• 事件总线eventBus-- 利用vm实例实现，$on绑定事件后最好在组件销毁前解绑($off)
• Vuex/pinia(Vue3)--重复使用数据多,数据共享,可实现孙子，子孙传值

slot插槽 ???

#具名插槽
父组件中：

子组件中：
 
#作用域插槽
父组件中：

	

子组件中：

export default {
   //数据在子组件自身
    data() {
     	return {
            dataSource:['lht','lht1','lht2','lht3']
                }
            },
 }    

Mixin混入 ??

`创建mixin.js文件`
export defalut{
   data(){
       return{
         egg:'aaa'
       }
   }，
   methods:{
      dark(){
        console.log(444)
        }
   }
}
`组件中导入`
import Mixin from './mixin.js'
export defalut{
    Mixins:[Mixin],
    data(){
        return{
            
        }
    },
    created(){
      this.egg,// aaa
      this.dark()// 444
    }
}

provide+inject ?

#父组件中
export defalut{
    data:{
        return{
            add:'我'
        }
    },
    provide:{//传递静态值写法
        foo:'我是静态值' //写出 foo:this.add 会报错
    }，
    //或
    provide(){//写法二
        return(){
          foo:this.add, //可以传递父组件的this    
        }
    }
}
#子组件中
export defalut{
    inject:['foo'],
    mounted(){
      console.log(this.foo) //我是静态值
      //或
      console.log(this.foo) // 我
    }
}

prop+$emit ????

#父组件 father.vue
import Son from './son.vue'
    
export defalut{
    commponent{
        Son
    },
    data(){
        return{
           msg:'hhh',
           msg2:'ooo'
        }
    },
    methods:{
        tragFa(data){
           console.log(this.msg,data) //data来自子组件触发事件传递的值deleta
           //打印  hhh aaaaa
        }
    }
}
#子组件 son.vue

export defalut{
    props：['msg2'],//从父组件获取的值
    data(){
        return{
      		delete:'aaaaa'     
        }
    },
    created(){
        this.$emit('trag',this.delete) //子触发父组件上的事件,将子组件数据传递到父组件
        console.log(this.msg2) //父传递到子的值(需要在父组件导入子组件的标签绑定)
        //打印  ooo
    }
}

# .sync修饰符与this.$emit("update:事件名")
在父组件导入的子组件标签上调用自定义事件加入了修饰符.sync时，子组件内取触发的事件的写法改写成以下写法：
this.$emit("update:trag")

route路由传参 ?

1.标签传参
 
 接收参数方法
 接收参数用`this.$route.params.userId`

2.配置路由页面参数
	(1)配置路径router //name一定要配置
	export default new Router({
              routes: [
                {
                  path: '/testVueRouterTo',
                  name: 'TestVueRouterTo',
                  component: TestVueRouterTo
                },
               ]
        }) 

	(2)this.$router.push传递 //跳转路由页面后传参--跳转前的页面
		组件中：
        this.$router.push({
            name: `TestVueRouterTo`,
            params: {
              page: '1', code: '8989'
            }
      	})
        	
	(3)this.$route接受参数 //跳转后的页面
	  this.$route.params.page ---- "1"
	  this.$route.params.code ---- "8989"

#注意：
`路由传参不推荐使用，在项目中一般用动态生成路由配置文件，不需要自己去一一在Router中配置单个路由参数传参，
动态路由由后台生成不好去修改，也不好去维护`
简单说一下this.$router与this.$route区别,this.$router用于跳转路由页面，而this.$route则获取当前路由上的数据

ref传值 ???

#父组件中 father.vue

import MySon from './son.vue'
export default{
    commponent：{
      MySon
    }，
    data(){
        return{
           son:null
        }
    },
    created:{
        this.$nextTick(()=>{
    		this.son=this.$ref.son;//获取到子组件上所有方法和数据
    		console.log(this.$ref.son.name) //打印 'lht'
            console.log(this.$ref.son.call()) //打印 'hhh'
		})
    }
}

#子组件中 son.vue
export default{
    data(){
        return{
           name:'lht',
           sayHello:'hhh'
        }
    },
    methods:{
        call(){
           console.log(this.sayHello)
        }
    }
}

$parent+$children ??

this.$children 是的一个数组，里面存放的是父组件中所有子组件实例,实例存放组件的方法和数据，this.$parent 也是一个数组
#父组件中 father.vue

import MySon from "./components/Son.vue";
import MyDau from "./components/Dau.vue";
export default {
  name: "Father",
  components: {
    MySon,
    MyDau
  },
  data(){
    return{
        Name:'fa'
    }  
  },
  created(){
     console.log(this.$children) //打印出Son.vue和Dau.vue实例 ,Arrary格式
     console.log(this.$parent) //打印出App.vue根实例
  }
}    
#子组件中 MySon.vue
export default {
  name: "MySon",
  created(){
     console.log(this.$parent) //打印出Father.vue根实例
  },
  data(){
      return{
          Name:'son'
      }
  } 
}   
#子组件2中 MyDau.vue
export default {
  name: "MyDau",
  created(){
     console.log(this.$parent) //打印出Father.vue根实例
  },
  data(){
      return{
          Name:'dau'
      }
  }  
} 

事件总线EventBus???

局部事件总线

A组件往B组件传值
event-Bus.js //定义eventBus 创建event-Bus.js
import Vue from 'vue'
export const eventBus=new Vue()

A组件 //Acon.vue

点一下
import eventBus from './event-Bus.js'
export default {
    data(){
        return{
         	Amsg:''  //v-model动态绑定数据  
        }
    },
    methods:{
        sendMsg(){
            eventBus.$emit('Msg',this.Amsg) //此时Msg在event-bus.js存放
        }
    }
}

B组件 //Bcon.vue
A传到B的值
{{ msg }}
import { eventBus } from '@/utils/event-bus'
export default {
  data() {
    return {
        msg:''
    }
  },
  mounted(){
      eventBus.$on("Msg",(msg)=>{ //B组件绑定事件 A组件点击触发时，将A的数据传递过来
          this.msg=msg
      })
  }
}
公有组件App //App

注：Vue2使用pinia要配合mapState,mapStores和mapActions等使用