vue常見的通信方式總結(jié)
更新時間：2023年08月03日 08:31:00 作者：zt_ever
我們?nèi)粘ｍ?xiàng)目開發(fā)中,少不了組件之間的通信,我們可能只知道一些常見的方式比如props,emits,其實(shí),實(shí)現(xiàn)組件間的通信有很多種方式,本文就給大家總結(jié)一些我們常見的通信方式,需要的朋友可以參考下
正文
一、props
props用于父組件給子組件傳參，主要步驟是：
- 父組件在引入的子組件上v-bind綁定一個變量，值為要傳遞的參數(shù)。
- 子組件用defineProps來接收傳過來的變量。
代碼示例如下：
<!-- 父組件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用于子組件給父組件傳參，主要步驟是：
- 子組件通過defineEmits注冊一個事件，并在點(diǎn)擊事件中將這個事件攜帶要傳遞的參數(shù)發(fā)散出去。
- 父組件在引入的子組件上綁定這個事件，這個事件的參數(shù)就是傳遞過來的值。
代碼示例如下：
<!-- 父組件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'])//注冊事件
const handle=()=>{
emit('add',msg.value)
}
</script>
<style lang="scss" scoped></style>效果圖如下：
三、v-model
v-model用于子組件給父組件傳參，主要步驟是：
- 子組件通過defineEmits注冊一個屬性，并在點(diǎn)擊事件中將這個屬性攜帶要傳遞的參數(shù)發(fā)散出去。
- 父組件在引入的子組件上用v-model綁定這個屬性，值為傳遞過來的值。
代碼示例如下：
<!-- 父組件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)懶，不用多去綁定一個點(diǎn)擊事件了。
四、refs
refs用于子組件給父組件傳參，主要步驟是：
- 子組件通過defineExpose將要傳遞的值暴露出去。
- 父組件在引入的子組件上用ref獲取子組件的dom結(jié)構(gòu)，dom結(jié)構(gòu)有值的時候讀取傳遞的值。
代碼示例如下：
<!-- 父組件Parent.vue -->
<template>
<h2>{{ childRef?.val }}</h2> <!--childRef有值的時候讀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用于父組件給子孫組件傳參，主要步驟是：
- 父組件通過provide將要傳遞的值提供出去（provide提供的一定是額外的引用類型數(shù)據(jù)）。
- 子孫組件通過inject注入傳遞過來的值。
代碼示例如下：
<!-- 父組件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)用于父子、子父、兄弟傳參，這里以父傳子為例，主要步驟是：
- 全局引入mitt并聲明vue全局的變量$emitter
- 父組件通過在點(diǎn)擊事件中調(diào)用emit方法將要傳遞的值發(fā)布出去。
- 子組件通過on方法的回調(diào)函數(shù)的參數(shù)得到傳遞過來的值。
代碼示例如下：
<!-- 父組件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(){ //倉庫中的數(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:{ //計算屬性，只要依賴值變化就會自動重新執(zhí)行
countSquare(state){
return state.count**2
}
}
})
export default store- 在main.js中引入store并把其掛載到vue中。
那么，在組件中如何訪問store中的數(shù)據(jù)和方法呢？我們從以下四塊來說明：
- 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)前組件的計算屬性
...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 來調(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的升級版，它有以下優(yōu)點(diǎn)：
- pinia拋棄了vuex中的mutations，pinia中actions兼容同步和異步。
- vuex中數(shù)據(jù)過多需分模塊進(jìn)行管理，而pinia中每個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', { //獲取購物車數(shù)據(jù)
username: JSON.parse(sessionStorage.getItem('userInfo')).username
})
this.badge=res.data.length
}
},
persist:{ //開啟數(shù)據(jù)緩存 持久化
enabled:true,
strategies:[ //緩存指定數(shù)據(jù)
{
path:['userInfo'],
storage:localStorage //指定localStorage存儲
}
]
}
})
export default useStore那么，在組件中如何訪問store中的數(shù)據(jù)和方法呢？直接引入并調(diào)用就可以訪問啦~
import useStore from '@/store/cart.js' const cart=useCartStore() cart.changeBadge()
總結(jié)
以上就是vue中的通信方式，組件通信不成問題了！如有錯誤或還有其它通信方式歡迎大佬指出，一起討論！
到此這篇關(guān)于vue常見的通信方式總結(jié)的文章就介紹到這了,更多相關(guān)vue通信方式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue3?Composition?API優(yōu)雅封裝第三方組件實(shí)例
這篇文章主要為大家介紹了Vue3?Composition?API優(yōu)雅封裝第三方組件實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
vue項(xiàng)目中vue.config.js文件詳解
vue.config.js?是一個可選的配置文件,如果項(xiàng)目的?(和?package.json?同級的)?根目錄中存在這個文件,那么它會被?@vue/cli-service?自動加載,這篇文章主要介紹了vue項(xiàng)目中vue.config.js文件的介紹,需要的朋友可以參考下2024-02-02
model在vue里面實(shí)現(xiàn)雙向綁定,通過父節(jié)點(diǎn)向子節(jié)點(diǎn)傳遞參數(shù),子節(jié)點(diǎn)通過操作再回傳給父節(jié)點(diǎn)的變量,有點(diǎn)像prop和$emit組合使用,下面這篇文章主要給大家介紹了關(guān)于Vue3中v-model的相關(guān)資料,需要的朋友可以參考下2022-11-11
如何實(shí)現(xiàn)echarts markline標(biāo)簽名顯示自己想要的
這篇文章主要介紹了實(shí)現(xiàn)echarts markline標(biāo)簽名顯示自己想要的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue 使用html2canvas將DOM轉(zhuǎn)化為圖片的方法
這篇文章主要介紹了vue 使用html2canvas將DOM轉(zhuǎn)化為圖片的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
vue實(shí)現(xiàn)pdf文件發(fā)送到郵箱功能的示例代碼
這篇文章主要介紹了vue實(shí)現(xiàn)pdf文件發(fā)送到郵箱功能,實(shí)現(xiàn)代碼包括對郵箱格式內(nèi)容是否為空的驗(yàn)證方法，代碼簡單易懂，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-05-05
Vue手動控制點(diǎn)擊事件Click觸發(fā)方式
這篇文章主要介紹了Vue手動控制點(diǎn)擊事件Click觸發(fā)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-01-01
在本篇文章中小編給大家整理的是關(guān)于vue總線機(jī)制(bus)知識點(diǎn)總結(jié)，有興趣的朋友們可以跟著學(xué)習(xí)下。2020-05-05
vue2.0里，不再有自帶的過濾器，需要自己定義過濾器。下面通過實(shí)例代碼給大家介紹vue2中filter()的相關(guān)知識，感興趣的朋友一起看看吧2017-07-07
本文主要介紹了Vue.js項(xiàng)目在IE11白屏報錯的解決方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-08-08