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等使用
标签：vue,return,export,Vue2,组件,import,data,传值 来源： https://www.cnblogs.com/lht1132950411/p/16265602.html