vue3組件通信的方式總結(jié)及實(shí)例用法
vue3組件通信方式為以下幾種
- props
- $emit
- $expose / ref
- $attrs
- v-model
- provide / inject
- Vuex
- mitt
props
<child :msg2="msg2" /> <script setup> const props = defineProps({ // 寫法一 msg2:String // 寫法二 msg2:{ type:String, default:'' } }) console.log(props) // {msg2:'這是傳級(jí)子組件的信息2'} </script>
$emit
//Child.vue <template> // 寫法一 <div @click="emit('myclick')">按鈕</div> // 寫法二 <div @click="handleClick">按鈕</div> </template> <script setup> // 方法一 const emit = defineEmits(['myClick'],['myClick2']) // 方法二 const handleClick = () => { emit('myClick','這是發(fā)送給父組件的信息'); } // 方法二 不適用于vue3.2,使用的useContext()已經(jīng)舍棄 import { useContext } from 'vue' const { emit } = useContext() const handleClick = () => { emit('myClick','這是發(fā)送給父組件的信息' } </script> // Parent.vue響應(yīng) <template> <child @myClick="onMyClick"></child> </template> <script setup> import child from "./child.vue" import onMychilk = (msg) => { console.log(msg) // 父組件收到的信息 } </script>
expose / ref
父組件獲取子組件的屬性或者調(diào)用子組件方法
<script setup> // 方法一:useContext() vue3.2 之后已經(jīng)舍棄 import { useContext } from 'vue' const ctx = useContext() // 對(duì)外暴露屬性方法等都可以 ctx.expose({ childName: '這是子組建的屬性', someMethod(){ console.log('這是子組件的方法') } }) </script> // Parent.vue 注意 ref="comp" <template> <child ref="comp"></child> <button @click="handleClick">按鈕</button> </template> <script> import child from './child.vue' import { ref } from 'vue' const comp = ref(null) const handleClick = () => { console.log(comp.value.childName) comp.value.someMethod() // 調(diào)用子組件對(duì)外暴露的方法 } </script>
attts
attrs:包含父作用域除class和style除外的非props屬性集合
// 父組件 <child :msg1="msg1" :msg2="msg2" title="3333"></child> <script setup> import child from './child.vue' import { ref,reactive } from 'vue const msg1 = ref('111') const msg2 = ref('222') </script> // 子組件 <script setup> import { defineProps,useContext,useAttars } from 'vue' const props = defineProps({ msg1: String }) // 方法1 const ctx = useContext() console.log(ctx.attars) // {msg2:'222',title:'333'} // 方法2 const attrs = useAttars() console.log(attars) // {msg2:'2222',title:'3333'} </script>
v-model
可以支持多個(gè)數(shù)據(jù)雙向綁定
<child v-model:key="key" v-modle:value="value" /> <script> import child from './child.vue' import { ref,reactive } from 'vue' const key = ref('111') const value = ref('222') </script> //子組件 <template> <button @click="handleClick"></button> </template> <script setup> // 方法一 v3.2 已被移除 import { useContext } from 'vue' const { emit } = useContext() // 方法二 import { defineEmits } from 'vue' const emit = defineEmits(['key','value']) //用法 const handleClick = () => { emit('update:key','新的key') emit('update:value','新的value') } </script>
provide / inject
provide/inject為依賴注入 provide:可以讓我們指定想要提供給后代組件的數(shù)據(jù) inject:在任何后代組件中接受想要添加在這個(gè)組件上的數(shù)據(jù),不管組件嵌套多深都可以直接拿來用
// 父組件 <script setup> import { provide } from 'vue' const name = provide('name') console.log('name','沐華') </script> //子組件 <script setup> import { inject } from 'vue' const name = inject('name') console.log(name) //木華 </script>
Vuex
//store/index.js import { createStore } from 'vuex' export default createStore({ state:{count:1}, getters:{ getCount:state=>state.count }, mutations:{ add(state){ state.count++ } } }) // main.js import { createApp } from 'vue' import APP from './App.vue' import store from './store' createApp(APP).use(store).mount("#app") // 直接使用 <template> <div> {{ $store.state.count }} </div> <button @click="$store.commit('add')"> </button> </template> // 獲取 <script setup> import { useStore,computed } from 'vuex' const store = useStore() console.log(store.state.count) const count = computed (()=>store.state.count) console.log(count) </script>
mitt
Vue3中已經(jīng)沒有了EventBus跨組件通信,替代方案mitt.js,但原理方式EventBus是一樣的
安裝方式 npm i mitt -S
封裝
mitt.js import mitt from 'mitt' const mitt = mitt() export default mitt
組件之間使用
// 組件A <script setup> import mitt from './mitt' const handleClick = () => { mitt.emit('handleChange') } </script> // 組件B <script setup> import mitt from './mitt' import { onUnmounted } from 'vue' const someMethod = () => {...} mitt.on('handleChange',someMethod) onUnmounted(()=>{ mitt.off('handleChange',someMethod) }) </script>
到此這篇關(guān)于vue3組件通信的方式總結(jié)及實(shí)例用法的文章就介紹到這了,更多相關(guān)vue3組件通信的幾種方式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue watch普通監(jiān)聽和深度監(jiān)聽實(shí)例詳解(數(shù)組和對(duì)象)
這篇文章主要介紹了vue watch普通監(jiān)聽和深度監(jiān)聽(數(shù)組和對(duì)象),文中單獨(dú)通過代碼給大家介紹了vue watch 深度監(jiān)聽的方法,感興趣的朋友一起看看吧2018-08-08Vue Autocomplete 自動(dòng)完成功能簡單示例
這篇文章主要介紹了Vue Autocomplete 自動(dòng)完成功能,結(jié)合簡單示例形式分析了Vue使用el-autocomplete組件實(shí)現(xiàn)自動(dòng)完成功能相關(guān)操作技巧,需要的朋友可以參考下2019-05-05vue3中利用Export2Excel將數(shù)據(jù)導(dǎo)出為excel表格
這篇文章主要給大家介紹了關(guān)于vue3中利用Export2Excel將數(shù)據(jù)導(dǎo)出為excel表格的相關(guān)資料,最近項(xiàng)目需要前端來導(dǎo)出Excel操作,所以給大家總結(jié)下,需要的朋友可以參考下2023-09-09