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插槽

#具名插槽
父组件中：
<template v-slot:demo2>
    <!--v-slot可简写成‘#’   <template #demo2>-->
    <ul>
          <li>我</li>
          <li>爱</li>
          <li>你</li>
   </ul>
</template>
子组件中：
 <slot name="demo1"></slot>
#作用域插槽
父组件中：
<Son>
	<template scope="formSon">
	<!-- dataSource来子组件  -->
		<ul>
		  <li v-for="(k,index) in dataSource" :key="index">{{k}}</li>
		 </ul>
	</template>
</Son>
子组件中：
<slot :dataSource="dataSource"></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'
<template>
    <Son
	:msg2=msg2
	@trag='tragFa'
    />
</template>
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.标签传参
 <router-link :to="{path:'/login',query:{userId: "33333"}}"></router-link>
 接收参数方法
 接收参数用`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
<template>
	<MySon
	 ref="son"
	/>
</template>
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
<template>
  <div>
    <MySon
    />
    <MyDau
    />
  </div>
</template>
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
<input v-model="Amsg">
<button @click="sendMsg()">点一下</button>
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
<p>A传到B的值</p>
<p>{{ msg }}</p>
import { eventBus } from '@/utils/event-bus'
export default {
  data() {
    return {
        msg:''
    }
  },
  mounted(){
      eventBus.$on("Msg",(msg)=>{ //B组件绑定事件 A组件点击触发时，将A的数据传递过来
          this.msg=msg
      })
  }
}
公有组件App //App
<template>
  <div id="app">
    <Acon/>
    <Bcon/>
  </div>
</template>
<script>
import Acon from './components/Acon.vue'
import Bcon from './components/Bcon.vue'
export default {
  name: 'App',
  components:{
    Acon,
    Bcon,
  }
}

示例效果对照图

全局事件总线

B往A传值

main.js中
//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false
//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	beforeCreate() {
		Vue.prototype.$bus = this //安装全局事件总线
	},
})

A组件中
<p>B传到A的值</p>
<p>{{ msg }}</p>
export default {
  data() {
    return {
        msg:''
    }
  },
  mounted(){
      this.$bus.$on("bMsg",(msg)=>{
          this.msg=msg
      })
  },
  beforeDestroy() {
			this.$bus.$off('bMsg')
		},
}
B组件中
<input v-model="Bmsg">
<button @click="sendMsg()">点一下</button>
data() {
    return {
        Bmsg:''
    }
  },
  methods:{
      sendMsg(){
          this.$bus.$emit('bMsg',this.Bmsg)
      }
  }

示例效果对照图

VueX/Pinia

Vuex

Vuex配置
import Vue from Vue
import Vuex from Vuex
const store=new VueX({
    state:{
        count:0
    },
    mutations:{
        fun(state){
            state.count++
        }
    },
    actions:{

    }
})

#组件中使用：
import store from './store/index.js'
export default{
    data(){
       return{
         count:this.$store.state.count //调取vuex上的数据
		}
    }，
    methods：{
    	trag(){
            this.$store.commit("fun") //调用vuex上的方法
        }
	}
}

Pinia使用(Vue3)

安装与引入

#安装
npm i pinia
#引入(在main.js中引入并挂载在根实例上)
//引入
import {createPinia} from 'pinia'
const pinia =createPinia()
//挂载
const app = createApp(App)
app.use(pinia) // 使用vue实例的use方法，告诉vue我们要使用pinia
app.mount('#app')

store配置

#store文件夹下index.js
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', {
        state: () => {
            return { //存放相关数据类型
                count: 0
            }
          },
    	actions: {//存放类似computed计算属性和方法
            increment() {
              this.count++
            },
      },
})

组件中使用(适用与vue3)

<template>
  <div>数字： {{ CounterStore.count }}</div>
</template>
<script setup>
import { useCounterStore } from '../store/index.js'
const CounterStore = useCounterStore()
</script>

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