vue常見(jiàn)的通信方式總結(jié)
更新時(shí)間：2023年08月03日 08:31:00 作者：zt_ever
我們?nèi)粘ｍ?xiàng)目開(kāi)發(fā)中,少不了組件之間的通信,我們可能只知道一些常見(jiàn)的方式比如props,emits,其實(shí),實(shí)現(xiàn)組件間的通信有很多種方式,本文就給大家總結(jié)一些我們常見(jiàn)的通信方式,需要的朋友可以參考下
正文
一、props
props用于父組件給子組件傳參，主要步驟是：
- 父組件在引入的子組件上v-bind綁定一個(gè)變量，值為要傳遞的參數(shù)。
- 子組件用defineProps來(lái)接收傳過(guò)來(lái)的變量。
代碼示例如下：
<!-- 父組件Parent.vue -->
<template>
<div>
<input type="text" v-model="value">
<button>添加</button>
</div>
<Child :val="value"/>
</template>
<script setup>
import Child from './child.vue'
import {ref} from 'vue'
const value=ref('hello')
</script>
<style lang="scss" scoped></style><!-- 子組件Child.vue -->
<template>
<h2>{{ val }}</h2>
</template>
<script setup>
const props=defineProps({
val:String
})
</script>
<style lang="scss" scoped></style>效果圖如下：
二、emits
emits用于子組件給父組件傳參，主要步驟是：
- 子組件通過(guò)defineEmits注冊(cè)一個(gè)事件，并在點(diǎn)擊事件中將這個(gè)事件攜帶要傳遞的參數(shù)發(fā)散出去。
- 父組件在引入的子組件上綁定這個(gè)事件，這個(gè)事件的參數(shù)就是傳遞過(guò)來(lái)的值。
代碼示例如下：
<!-- 父組件Parent.vue -->
<template>
<h2>{{ res }}</h2>
<Child @add="handleAdd" />
</template>
<script setup>
import Child from './child.vue'
import { ref } from 'vue'
const res = ref('hello')
const handleAdd = (e) => {
res.value = e
}
</script>
<style lang="scss" scoped></style><!-- 子組件Child.vue -->
<template>
<input type="text" v-model="msg">
<button @click="handle">添加</button>
</template>
<script setup>
import {ref} from 'vue'
const msg=ref('hello')
const emit=defineEmits(['add'])//注冊(cè)事件
const handle=()=>{
emit('add',msg.value)
}
</script>
<style lang="scss" scoped></style>效果圖如下：
三、v-model
v-model用于子組件給父組件傳參，主要步驟是：
- 子組件通過(guò)defineEmits注冊(cè)一個(gè)屬性，并在點(diǎn)擊事件中將這個(gè)屬性攜帶要傳遞的參數(shù)發(fā)散出去。
- 父組件在引入的子組件上用v-model綁定這個(gè)屬性，值為傳遞過(guò)來(lái)的值。
代碼示例如下：
<!-- 父組件Parent.vue -->
<template>
<h2>{{ title }}</h2>
<Child v-model:msg="title"/>
</template>
<script setup>
import Child from './child.vue'
import { ref } from 'vue'
const title = ref('hello')
</script>
<style lang="scss" scoped></style><!-- 子組件Child.vue -->
<template>
<input type="text" v-model="val">
<button @click="handle">添加</button>
</template>
<script setup>
import {ref} from 'vue'
const val=ref('hello')
const emits=defineEmits(['update:msg'])
const handle=()=>{
emits('update:msg',val.value)
}
</script>
<style lang="scss" scoped></style>效果圖如下：
v-model能達(dá)到和emits一樣的效果，主要區(qū)別就是父組件可以偷點(diǎn)懶，不用多去綁定一個(gè)點(diǎn)擊事件了。
四、refs
refs用于子組件給父組件傳參，主要步驟是：
- 子組件通過(guò)defineExpose將要傳遞的值暴露出去。
- 父組件在引入的子組件上用ref獲取子組件的dom結(jié)構(gòu)，dom結(jié)構(gòu)有值的時(shí)候讀取傳遞的值。
代碼示例如下：
<!-- 父組件Parent.vue -->
<template>
<h2>{{ childRef?.val }}</h2> <!--childRef有值的時(shí)候讀val-->
<Child ref="childRef"/>
</template>
<script setup>
import Child from './child.vue'
import { ref } from 'vue'
const childRef=ref(null) //子組件的dom結(jié)構(gòu)
</script>
<style lang="scss" scoped></style><!-- 子組件Child.vue -->
<template>
<input type="text" v-model="val">
<button @click="handle">添加</button>
</template>
<script setup>
import {ref} from 'vue'
const val=ref('')
const handle=()=>{}
defineExpose({val})
</script>
<style lang="scss" scoped></style>效果如下：
五、provide、inject
provide、inject用于父組件給子孫組件傳參，主要步驟是：
- 父組件通過(guò)provide將要傳遞的值提供出去（provide提供的一定是額外的引用類(lèi)型數(shù)據(jù)）。
- 子孫組件通過(guò)inject注入傳遞過(guò)來(lái)的值。
代碼示例如下：
<!-- 父組件Parent.vue -->
<template>
<div>
<input type="text" v-model="msg">
<button @click="handle">添加</button>
</div>
<Child />
</template>
<script setup>
import Child from './child.vue'
import { provide, ref } from 'vue'
const msg = ref('')
const list=ref(['html','css'])
provide('title', list.value)
const handle = () => {
list.value.push(msg.value)
msg.value=''
}
</script>
<style lang="scss" scoped></style><!-- 子組件Child.vue -->
<template>
<h2>{{ title }}</h2>
</template>
<script setup>
import { inject } from 'vue'
const title = inject('title')
</script>
<style lang="scss" scoped></style>效果圖如下：
六、eventBus(mitt)
eventBus(mitt)用于父子、子父、兄弟傳參，這里以父?jìng)髯訛槔?，主要步驟是：
- 全局引入mitt并聲明vue全局的變量$emitter
- 父組件通過(guò)在點(diǎn)擊事件中調(diào)用emit方法將要傳遞的值發(fā)布出去。
- 子組件通過(guò)on方法的回調(diào)函數(shù)的參數(shù)得到傳遞過(guò)來(lái)的值。
代碼示例如下：
<!-- 父組件Parent.vue -->
<template>
<div>
<input type="text" v-model="msg">
<button @click="handle">添加</button>
</div>
<Child />
</template>
<script setup>
import Child from './child.vue'
import { ref,getCurrentInstance } from 'vue'
const msg = ref('')
const app=getCurrentInstance()
const handle = () => {
app.appContext.config.globalProperties.$emitter.emit('foo', msg.value)
}
</script>
<style lang="scss" scoped></style><!-- 子組件Child.vue -->
<template>
<h2>{{ title }}</h2>
</template>
<script setup>
import { ref,getCurrentInstance } from 'vue'
const title = ref('hello world')
const app=getCurrentInstance()
app.appContext.config.globalProperties.$emitter.on('foo',(e)=>{
title.value=e
})
</script>
<style lang="scss" scoped></style>效果圖如下：
七、vuex
vuex我們都不陌生，用于共享數(shù)據(jù)狀態(tài)，便捷了組件間的通信以及代碼的維護(hù)，它的基礎(chǔ)用法如下：
- 使用yarn/npm安裝vuex。
- 在src下的store中新建index.js。
import {createStore} from 'vuex'
const store=createStore({
state(){ //倉(cāng)庫(kù)中的數(shù)據(jù)源
return {
count:2
}
},
mutations:{ //所有修改數(shù)據(jù)源的方法
add(state,n){
state.count+=n
}
},
actions:{ //觸發(fā)mutations中的方法
addAction(context,num){
context.commit('add',num)
}
},
getters:{ //計(jì)算屬性，只要依賴(lài)值變化就會(huì)自動(dòng)重新執(zhí)行
countSquare(state){
return state.count**2
}
}
})
export default store- 在main.js中引入store并把其掛載到vue中。
那么，在組件中如何訪問(wèn)store中的數(shù)據(jù)和方法呢？我們從以下四塊來(lái)說(shuō)明：
- state
- 使用this.$store.state.count
<template>
<div id="app">
{{ this.$store.state.count }}
</div>
</template>- 使用mapState
// 從 Vuex 中導(dǎo)入 mapState
import { mapState } from 'vuex'
export default {
computed: { // 將 store 映射到當(dāng)前組件的計(jì)算屬性
...mapState(['count'])
}
}- mutations
- 使用this.$store.commit()
export default {
methods: {
handle() { // 觸發(fā) mutations 中的 add 方法
this.$store.commit('add', 1)
}
}
}- 使用mapMutations
import { mapMutations } from 'vuex'
export default {
methods: { // 將 mutations 中的 add 方法映射到 methods 中
...mapMutations(['add'])
}
}- actions
- 使用this.$store.dispatch()
export default {
methods: {
handle(num) { // 使用 dispatch 來(lái)調(diào)用 actions 中的方法
this.$store.commit('addAction', num)
}
}
}- 使用mapActions
import { mapActions } from 'vuex'
export default {
methods: {
// 映射 actions 中的指定方法 到 methods中
...mapActions(['addAction'])
}
}- getters
- 使用this.$store.getters.countSquare
<template>
<div id="app">
{{ this.$store.getters.countSquare }}
</div>
</template>- 使用mapGetters
import { mapGetters } from 'vuex'
export default {
computed: {
// 映射 actions 中的指定方法 到 methods中
...mapGetters(['countSquare'])
}
}八、pinia
pinia是vuex的升級(jí)版，它有以下優(yōu)點(diǎn)：
- pinia拋棄了vuex中的mutations，pinia中actions兼容同步和異步。
- vuex中數(shù)據(jù)過(guò)多需分模塊進(jìn)行管理，而pinia中每個(gè)store都是獨(dú)立的，互不影響。
- pinia體積非常小，只有1KB左右。
它的基礎(chǔ)用法如下：
- 使用yarn/npm安裝pinia。
- 引入pinia并掛載
import App from './App.vue'
import {createPinia} from 'pinia'
createApp(App).use(createPinia()).mount('#app')- 在src下的store中新建index.js。
import {defineStore} from 'pinia'
import axios from 'axios'
const useStore=defineStore('cart',{
state:()=>{ //放響應(yīng)式數(shù)據(jù)源
return{
badge:0
}
},
getters:{
handleBadge(){
this.badge++
}
},
actions:{
async changeBadge(){
const res =await axios.post('/cartList', { //獲取購(gòu)物車(chē)數(shù)據(jù)
username: JSON.parse(sessionStorage.getItem('userInfo')).username
})
this.badge=res.data.length
}
},
persist:{ //開(kāi)啟數(shù)據(jù)緩存 持久化
enabled:true,
strategies:[ //緩存指定數(shù)據(jù)
{
path:['userInfo'],
storage:localStorage //指定localStorage存儲(chǔ)
}
]
}
})
export default useStore那么，在組件中如何訪問(wèn)store中的數(shù)據(jù)和方法呢？直接引入并調(diào)用就可以訪問(wèn)啦~
import useStore from '@/store/cart.js' const cart=useCartStore() cart.changeBadge()
總結(jié)
以上就是vue中的通信方式，組件通信不成問(wèn)題了！如有錯(cuò)誤或還有其它通信方式歡迎大佬指出，一起討論！
到此這篇關(guān)于vue常見(jiàn)的通信方式總結(jié)的文章就介紹到這了,更多相關(guān)vue通信方式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
基于el-table實(shí)現(xiàn)行內(nèi)增刪改功能
這篇文章主要介紹了基于el-table實(shí)現(xiàn)行內(nèi)增刪改功能,用過(guò)通過(guò)操作按鈕點(diǎn)擊刪除或者編輯功能即可實(shí)現(xiàn)相應(yīng)的效果,下面小編給大家分享實(shí)例代碼感興趣的朋友跟隨小編一起看看吧2024-04-04
這篇文章主要介紹了關(guān)于axios的proxy代理配置解析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)時(shí)間軸效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
vue.js-div滾動(dòng)條隱藏但有滾動(dòng)效果的實(shí)現(xiàn)方法
下面小編就為大家分享一篇vue.js-div滾動(dòng)條隱藏但有滾動(dòng)效果的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
在Vue.js中,組件間的通信是構(gòu)建復(fù)雜應(yīng)用的關(guān)鍵,但當(dāng)涉及到非父子關(guān)系的組件通信時(shí),傳統(tǒng)的做法就顯得力不從心了,本文將深入探討幾種有效的非父子組件通信方法,并通過(guò)具體的代碼示例來(lái)幫助讀者理解和應(yīng)用這些技術(shù),需要的朋友可以參考下2024-09-09
v-model 指令默認(rèn)會(huì)在 input 事件中加載輸入框中的數(shù)據(jù)（中文輸入法中輸入拼音的過(guò)程除外）。這篇文章通過(guò)實(shí)例代碼給大家介紹Vue.js中 v-model 指令的修飾，感興趣的朋友跟隨小編一起看看吧2018-12-12
Vue3偵聽(tīng)器的實(shí)現(xiàn)原理詳情
這篇文章主要介紹了Vue3偵聽(tīng)器的實(shí)現(xiàn)原理詳情，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-08-08
elementplus實(shí)現(xiàn)多級(jí)表格(最后一級(jí)展示圖片)
本文主要介紹了elementplus實(shí)現(xiàn)多級(jí)表格(最后一級(jí)展示圖片)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
基于Vue + Axios實(shí)現(xiàn)全局Loading自動(dòng)顯示關(guān)閉效果
在vue項(xiàng)目中,我們通常會(huì)使用Axios來(lái)與后臺(tái)進(jìn)行數(shù)據(jù)交互,而當(dāng)我們發(fā)起請(qǐng)求時(shí),常常需要在頁(yè)面上顯示一個(gè)加載框（Loading）,然后等數(shù)據(jù)返回后自動(dòng)將其隱藏,本文介紹了基于Vue + Axios實(shí)現(xiàn)全局Loading自動(dòng)顯示關(guān)閉效果,需要的朋友可以參考下2024-03-03
vue實(shí)現(xiàn)todolist基本功能以及數(shù)據(jù)存儲(chǔ)功能實(shí)例詳解
本文通過(guò)實(shí)例代碼給大家介紹了vue實(shí)現(xiàn)todolist基本功能以及數(shù)據(jù)存儲(chǔ)功能,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-04-04