Vue2-组件通讯传值

2022-07-19 15:06:09 阅读：153 来源： 互联网

标签：vue return export Vue2 组件 import data 传值

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Vue2-组件通讯传值

Vue2组件通讯传值

slot插槽 ⭐⭐⭐

Mixin混入 ⭐⭐

provide+inject ⭐

prop+$emit ⭐⭐⭐⭐

route路由传参 ⭐

ref传值 ⭐⭐⭐

$parent+$children ⭐⭐

事件总线EventBus⭐⭐⭐

局部事件总线

示例效果对照图

全局事件总线

示例效果对照图

VueX/Pinia ⭐⭐⭐

Vuex

Pinia使用(Vue3)

安装与引入

store配置

组件中使用(适用与vue3)