站長資訊網Vue組件間怎么通信？本篇文章盤點Vue2和Vue3的10種組件通信方式，希望對大家有所幫助！
Vue中組件通信方式有很多，其中Vue2和Vue3實現起來也會有很多差異；本文將通過選項式API 組合式API以及setup三種不同實現方式全面介紹Vue2和Vue3的組件通信方式。其中將要實現的通信方式如下表所示。（學習視頻分享：vue視頻教程）
| 方式 | Vue2 | Vue3 |
|---|---|---|
| 父傳子 | props | props |
| 子傳父 | $emit | emits |
| 父傳子 | $attrs | attrs |
| 子傳父 | $listeners | 無(合并到 attrs方式) |
| 父傳子 | provide | provide |
| 子傳父 | inject | inject |
| 子組件訪問父組件 | $parent | 無 |
| 父組件訪問子組件 | $children | 無 |
| 父組件訪問子組件 | $ref | expose&ref |
| 兄弟傳值 | EventBus | mitt |
props
props是組件通信中最常用的通信方式之一。父組件通過v-bind傳入，子組件通過props接收，下面是它的三種實現方式
- 選項式API
//父組件 <template> <div> <Child :msg="parentMsg" /> </div> </template> <script> import Child from './Child' export default { components:{ Child }, data() { return { parentMsg: '父組件信息' } } } </script> //子組件 <template> <div> {{msg}} </div> </template> <script> export default { props:['msg'] } </script>
- 組合式Api
//父組件 <template> <div> <Child :msg="parentMsg" /> </div> </template> <script> import { ref,defineComponent } from 'vue' import Child from './Child.vue' export default defineComponent({ components:{ Child }, setup() { const parentMsg = ref('父組件信息') return { parentMsg }; }, }); </script> //子組件 <template> <div> {{ parentMsg }} </div> </template> <script> import { defineComponent,toRef } from "vue"; export default defineComponent({ props: ["msg"],// 如果這行不寫，下面就接收不到 setup(props) { console.log(props.msg) //父組件信息 let parentMsg = toRef(props, 'msg') return { parentMsg }; }, }); </script>
- setup語法糖
//父組件 <template> <div> <Child :msg="parentMsg" /> </div> </template> <script setup> import { ref } from 'vue' import Child from './Child.vue' const parentMsg = ref('父組件信息') </script> //子組件 <template> <div> {{ parentMsg }} </div> </template> <script setup> import { toRef, defineProps } from "vue"; const props = defineProps(["msg"]); console.log(props.msg) //父組件信息 let parentMsg = toRef(props, 'msg') </script>
注意
props中數據流是單項的，即子組件不可改變父組件傳來的值
在組合式API中，如果想在子組件中用其它變量接收props的值時需要使用toRef將props中的屬性轉為響應式。
emit
子組件可以通過emit發布一個事件并傳遞一些參數，父組件通過v-on進行這個事件的監聽
- 選項式API
//父組件 <template> <div> <Child @sendMsg="getFromChild" /> </div> </template> <script> import Child from './Child' export default { components:{ Child }, methods: { getFromChild(val) { console.log(val) //我是子組件數據 } } } </script> // 子組件 <template> <div> <button @click="sendFun">send</button> </div> </template> <script> export default { methods:{ sendFun(){ this.$emit('sendMsg','我是子組件數據') } } } </script>
- 組合式Api
//父組件 <template> <div> <Child @sendMsg="getFromChild" /> </div> </template> <script> import Child from './Child' import { defineComponent } from "vue"; export default defineComponent({ components: { Child }, setup() { const getFromChild = (val) => { console.log(val) //我是子組件數據 } return { getFromChild }; }, }); </script> //子組件 <template> <div> <button @click="sendFun">send</button> </div> </template> <script> import { defineComponent } from "vue"; export default defineComponent({ emits: ['sendMsg'], setup(props, ctx) { const sendFun = () => { ctx.emit('sendMsg', '我是子組件數據') } return { sendFun }; }, }); </script>
- setup語法糖
//父組件 <template> <div> <Child @sendMsg="getFromChild" /> </div> </template> <script setup> import Child from './Child' const getFromChild = (val) => { console.log(val) //我是子組件數據 } </script> //子組件 <template> <div> <button @click="sendFun">send</button> </div> </template> <script setup> import { defineEmits } from "vue"; const emits = defineEmits(['sendMsg']) const sendFun = () => { emits('sendMsg', '我是子組件數據') } </script>
attrs和listeners
子組件使用$attrs可以獲得父組件除了props傳遞的屬性和特性綁定屬性 (class和 style)之外的所有屬性。
子組件使用$listeners可以獲得父組件(不含.native修飾器的)所有v-on事件監聽器，在Vue3中已經不再使用；但是Vue3中的attrs不僅可以獲得父組件傳來的屬性也可以獲得父組件v-on事件監聽器
- 選項式API
//父組件 <template> <div> <Child @parentFun="parentFun" :msg1="msg1" :msg2="msg2" /> </div> </template> <script> import Child from './Child' export default { components:{ Child }, data(){ return { msg1:'子組件msg1', msg2:'子組件msg2' } }, methods: { parentFun(val) { console.log(`父組件方法被調用,獲得子組件傳值：${val}`) } } } </script> //子組件 <template> <div> <button @click="getParentFun">調用父組件方法</button> </div> </template> <script> export default { methods:{ getParentFun(){ this.$listeners.parentFun('我是子組件數據') } }, created(){ //獲取父組件中所有綁定屬性 console.log(this.$attrs) //{"msg1": "子組件msg1","msg2": "子組件msg2"} //獲取父組件中所有綁定方法 console.log(this.$listeners) //{parentFun:f} } } </script>
- 組合式API
//父組件 <template> <div> <Child @parentFun="parentFun" :msg1="msg1" :msg2="msg2" /> </div> </template> <script> import Child from './Child' import { defineComponent,ref } from "vue"; export default defineComponent({ components: { Child }, setup() { const msg1 = ref('子組件msg1') const msg2 = ref('子組件msg2') const parentFun = (val) => { console.log(`父組件方法被調用,獲得子組件傳值：${val}`) } return { parentFun, msg1, msg2 }; }, }); </script> //子組件 <template> <div> <button @click="getParentFun">調用父組件方法</button> </div> </template> <script> import { defineComponent } from "vue"; export default defineComponent({ emits: ['sendMsg'], setup(props, ctx) { //獲取父組件方法和事件 console.log(ctx.attrs) //Proxy {"msg1": "子組件msg1","msg2": "子組件msg2"} const getParentFun = () => { //調用父組件方法 ctx.attrs.onParentFun('我是子組件數據') } return { getParentFun }; }, }); </script>
- setup語法糖
//父組件 <template> <div> <Child @parentFun="parentFun" :msg1="msg1" :msg2="msg2" /> </div> </template> <script setup> import Child from './Child' import { ref } from "vue"; const msg1 = ref('子組件msg1') const msg2 = ref('子組件msg2') const parentFun = (val) => { console.log(`父組件方法被調用,獲得子組件傳值：${val}`) } </script> //子組件 <template> <div> <button @click="getParentFun">調用父組件方法</button> </div> </template> <script setup> import { useAttrs } from "vue"; const attrs = useAttrs() //獲取父組件方法和事件 console.log(attrs) //Proxy {"msg1": "子組件msg1","msg2": "子組件msg2"} const getParentFun = () => { //調用父組件方法 attrs.onParentFun('我是子組件數據') } </script>
注意
Vue3中使用attrs調用父組件方法時，方法前需要加上on；如parentFun->onParentFun
provide/inject
provide：是一個對象，或者是一個返回對象的函數。里面包含要給子孫后代屬性
inject：一個字符串數組，或者是一個對象。獲取父組件或更高層次的組件provide的值，既在任何后代組件都可以通過inject獲得
- 選項式API
//父組件 <script> import Child from './Child' export default { components: { Child }, data() { return { msg1: '子組件msg1', msg2: '子組件msg2' } }, provide() { return { msg1: this.msg1, msg2: this.msg2 } } } </script> //子組件 <script> export default { inject:['msg1','msg2'], created(){ //獲取高層級提供的屬性 console.log(this.msg1) //子組件msg1 console.log(this.msg2) //子組件msg2 } } </script>
- 組合式API
//父組件 <script> import Child from './Child' import { ref, defineComponent,provide } from "vue"; export default defineComponent({ components:{ Child }, setup() { const msg1 = ref('子組件msg1') const msg2 = ref('子組件msg2') provide("msg1", msg1) provide("msg2", msg2) return { } }, }); </script> //子組件 <template> <div> <button @click="getParentFun">調用父組件方法</button> </div> </template> <script> import { inject, defineComponent } from "vue"; export default defineComponent({ setup() { console.log(inject('msg1').value) //子組件msg1 console.log(inject('msg2').value) //子組件msg2 }, }); </script>
- setup語法糖
//父組件 <script setup> import Child from './Child' import { ref,provide } from "vue"; const msg1 = ref('子組件msg1') const msg2 = ref('子組件msg2') provide("msg1",msg1) provide("msg2",msg2) </script> //子組件 <script setup> import { inject } from "vue"; console.log(inject('msg1').value) //子組件msg1 console.log(inject('msg2').value) //子組件msg2 </script>
說明
provide/inject一般在深層組件嵌套中使用合適。一般在組件開發中用的居多。
parent/children
$parent: 子組件獲取父組件Vue實例，可以獲取父組件的屬性方法等
$children: 父組件獲取子組件Vue實例，是一個數組，是直接兒子的集合，但并不保證子組件的順序
- Vue2
import Child from './Child' export default { components: { Child }, created(){ console.log(this.$children) //[Child實例] console.log(this.$parent)//父組件實例 } }
注意父組件獲取到的$children并不是響應式的
expose&ref
$refs可以直接獲取元素屬性，同時也可以直接獲取子組件實例
- 選項式API
//父組件 <template> <div> <Child ref="child" /> </div> </template> <script> import Child from './Child' export default { components: { Child }, mounted(){ //獲取子組件屬性 console.log(this.$refs.child.msg) //子組件元素 //調用子組件方法 this.$refs.child.childFun('父組件信息') } } </script> //子組件 <template> <div> <div></div> </div> </template> <script> export default { data(){ return { msg:'子組件元素' } }, methods:{ childFun(val){ console.log(`子組件方法被調用,值${val}`) } } } </script>
- 組合式API
//父組件 <template> <div> <Child ref="child" /> </div> </template> <script> import Child from './Child' import { ref, defineComponent, onMounted } from "vue"; export default defineComponent({ components: { Child }, setup() { const child = ref() //注意命名需要和template中ref對應 onMounted(() => { //獲取子組件屬性 console.log(child.value.msg) //子組件元素 //調用子組件方法 child.value.childFun('父組件信息') }) return { child //必須return出去 否則獲取不到實例 } }, }); </script> //子組件 <template> <div> </div> </template> <script> import { defineComponent, ref } from "vue"; export default defineComponent({ setup() { const msg = ref('子組件元素') const childFun = (val) => { console.log(`子組件方法被調用,值${val}`) } return { msg, childFun } }, }); </script>
- setup語法糖
//父組件 <template> <div> <Child ref="child" /> </div> </template> <script setup> import Child from './Child' import { ref, onMounted } from "vue"; const child = ref() //注意命名需要和template中ref對應 onMounted(() => { //獲取子組件屬性 console.log(child.value.msg) //子組件元素 //調用子組件方法 child.value.childFun('父組件信息') }) </script> //子組件 <template> <div> </div> </template> <script setup> import { ref,defineExpose } from "vue"; const msg = ref('子組件元素') const childFun = (val) => { console.log(`子組件方法被調用,值${val}`) } //必須暴露出去父組件才會獲取到 defineExpose({ childFun, msg }) </script>
注意
通過ref獲取子組件實例必須在頁面掛載完成后才能獲取。
在使用setup語法糖時候，子組件必須元素或方法暴露出去父組件才能獲取到
EventBus/mitt
兄弟組件通信可以通過一個事件中心EventBus實現，既新建一個Vue實例來進行事件的監聽，觸發和銷毀。
在Vue3中沒有了EventBus兄弟組件通信，但是現在有了一個替代的方案mitt.js，原理還是 EventBus
- 選項式API
//組件1 <template> <div> <button @click="sendMsg">傳值</button> </div> </template> <script> import Bus from './bus.js' export default { data(){ return { msg:'子組件元素' } }, methods:{ sendMsg(){ Bus.$emit('sendMsg','兄弟的值') } } } </script> //組件2 <template> <div> 組件2 </div> </template> <script> import Bus from './bus.js' export default { created(){ Bus.$on('sendMsg',(val)=>{ console.log(val);//兄弟的值 }) } } </script> //bus.js import Vue from "vue" export default new Vue()
- 組合式API
首先安裝mitt
npm i mitt -S
然后像Vue2中bus.js一樣新建mitt.js文件
mitt.js
import mitt from 'mitt' const Mitt = mitt() export default Mitt
//組件1 <template> <button @click="sendMsg">傳值</button> </template> <script> import { defineComponent } from "vue"; import Mitt from './mitt.js' export default defineComponent({ setup() { const sendMsg = () => { Mitt.emit('sendMsg','兄弟的值') } return { sendMsg } }, }); </script> //組件2 <template> <div> 組件2 </div> </template> <script> import { defineComponent, onUnmounted } from "vue"; import Mitt from './mitt.js' export default defineComponent({ setup() { const getMsg = (val) => { console.log(val);//兄弟的值 } Mitt.on('sendMsg', getMsg) onUnmounted(() => { //組件銷毀 移除監聽 Mitt.off('sendMsg', getMsg) }) }, }); </script>
- setup語法糖
//組件1 <template> <button @click="sendMsg">傳值</button> </template> <script setup> import Mitt from './mitt.js' const sendMsg = () => { Mitt.emit('sendMsg', '兄弟的值') } </script> //組件2 <template> <div> 組件2 </div> </template> <script setup> import { onUnmounted } from "vue"; import Mitt from './mitt.js' const getMsg = (val) => { console.log(val);//兄弟的值 } Mitt.on('sendMsg', getMsg) onUnmounted(() => { //組件銷毀 移除監聽 Mitt.off('sendMsg', getMsg) }) </script>
寫在最后
其實組件還可以借助Vuex或者Pinia狀態管理工具進行通信(但是組件之間的通信一般不建議這樣做,因為這樣就會出現組件不能復用的問題)。對于Vuex和Pinia的用法大家可以參考這篇文章一文解析Pinia和Vuex
（學習視頻分享：web前端開發、編程基礎視頻）
