在我們寫 vue3 的專案中,我們都會進行元件通信,我們除了使用 pinia 公共資料來源的方式除外,我們還可採用那些更簡單的API方法呢?那下面我就來跟大家介紹介紹幾種父子元件和子父元件通訊的方式。
1、父子元件通訊
1.1 defineProps
父子元件通訊我們第一個想到的就是props,我們在子元件顯示宣告所接受的props,然後我們在從父元件傳入對應的key與value, 這樣我們就可以在子元件上接收到父元件傳過來的屬性與值。 【相關推薦:vuejs影片教學、web前端開發】
#具體實作如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <template>
<ul class= "list-group" >
<li class= "list-group-item" v- for = "item in list" :key= "index" >
{{item}}
</li>
</ul>
</template>
<script setup>
import { defineProps } from & #39;vue';
const props = defineProps({
list :{
type: Array,
default : () => {}
}
})
</script>
|
登入後複製
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <template>
<div class= "parent-wrap" >
<input type= "text" v-model= "value" class= "form-control" placeholder= "请输入" >
<div class= "input-group-append" >
<button class= "btn btn-primary" @click= "handleAdd" >添加</button>
</div>
</div>
<!-- child -->
<childrenVue :list= "list" ></childrenVue>
</template>
<script setup>
import { ref } from & #39;vue';
import childrenVue from & #39;./children.vue';
const value = ref(& #39;')
const list = ref([& #39;javaScript', 'Html', 'CSS'])
const handleAdd = () =>{
list.value.push(value.value)
value = & #39;'
}
</script>
|
登入後複製
如上圖所示,我們既實現了在子元件上顯示了父元件傳過來的list 數組,還使可以向list新增資料使子元件資料更新。
1.2 provide/inject
當我們聊完了props,我們第二個要介紹的就是 vue3 的一個組合式選項 provide 和inject。
projct用於提供可以被後代元件注入的值,而inject用於聲明要透過從上層提供方匹配並注入進當前元件的屬性。 其程式碼實作如下:
1 2 3 4 5 6 7 8 9 10 | <template>
<ul class= "list-group" >
<li class= "list-group-item" v- for = "item in list" :key= "item" >{{item}}</li>
</ul>
</template>
<script setup>
import { inject } from & #39;vue';
const list = inject(& #39;list')
</script>
|
登入後複製
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <template>
<div class= "parent-wrap" >
<input type= "text" v-model= "value" class= "form-control" placeholder= "请输入" >
<div class= "input-group-append" >
<button class= "btn btn-primary" @click= "handleAdd" >添加</button>
</div>
</div>
<!-- child -->
<childVue />
</template>
<script setup>
import childVue from "./child.vue" ;
const { ref, provide, readonly } = require( "vue" );
const value = ref(& #39;')
const list = ref([& #39;javaScript', 'HTML', 'CSS'])
provide(& #39;list', readonly(list.value))
const handleAdd = () => {
list.value.push(value.value)
}
</script>
|
登入後複製
如上圖所示,我們使用provide
API向外提供了一個key 為list
,值為list.value
,同時將list,value
設定成了唯讀屬性,防止子元件修改父元件的資料來源。然後我們 inject
API接收了 list
,實作了父子元件的通訊。
2.子父元件通訊
2.1 defineEmits
#上面我介紹了兩種父向子傳值的方法,但在我們開發中,我們還會遇到子向父元件傳值的情況,那我們該怎麼解決呢?第一個方法就是vue3中的defineEmits
API,程式碼實作如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <template>
<div class= "parent-wrap" >
<input type= "text" v-model= "value" class= "form-control" placeholder= "请输入" />
<div class= "input-group-append" >
<button class= "btn btn-primary" @click= "handleAdd" >添加</button>
</div>
</div>
</template>
<script setup>
const { ref, defineEmits } = require( "vue" );
const value = ref(& #39;')
const emits = defineEmits([& #39;add']) //父传子
const handleAdd = () => {
emits(& #39;add', value.value)
value.value= & #39;'
}
</script>
|
登入後複製
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <template>
<childVue @add=& #39;handleAdd'/>
<ul class= "list-group" >
<li class= "list-group-item" v- for = "item in list" :key= "item" >{{item}}</li>
</ul>
</template>
<script setup>
import { ref } from & #39;@vue/reactivity';
import childVue from & #39;./child.vue';
const list = ref([& #39;javaScript', 'HTML', 'CSS'])
const handleAdd = (val) => {
list.value.push(val)
}
</script>
|
登入後複製
如上圖所示,我們在子元件上 emit
一個出了一個add事件給父元件接收,同時在父元件上呼叫來執行新增的邏輯,再將input
的value
變成空,實作了父組件向子組件傳參。
2.2 v-model:xxx emit
在介紹完defineEmits
後, 我們再來介紹一種與其有異曲同工之處的v-model:xxx emit
的方法,實作如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <template>
<div class= "parent-wrap" >
<input type= "text" v-model= "value" class= "form-control" placeholder= "请输入" />
<div class= "input-group-append" >
<button class= "btn btn-primary" @click= "handleAdd" >添加</button>
</div>
</div>
</template>
<script setup>
const { ref, defineProps, defineEmits } = require( "vue" );
const value = ref(& #39;')
const props = defineProps({
list: {
type: Array,
default : () => []
}
})
const emits = defineEmits([& #39;list'])
const handleAdd = () => {
const arr = props.list
arr.push(value.value)
emits(& #39;list', arr)
value.value= & #39;'
}
</script>
|
登入後複製
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <template>
<childVue v-model:list= "list" @list =& #39;add'/>
<ul class= "list-group" >
<li class= "list-group-item" v- for = "item in list" :key= "item" >{{item}}</li>
</ul>
</template>
<script setup>
import { ref } from & #39;@vue/reactivity';
import childVue from & #39;./child.vue';
const list = ref([& #39;javaScript', 'HTML', 'CSS'])
const add =(val) => {
console.log(val);
console.log(list);
}
</script>
|
登入後複製
再和上面的defineEmits
方法比較完以後,相信大家也看出了這兩者的異曲同工在哪裡了。我們這裡是先將父元件的list
傳給了子元件,再在子元件修改了父元件的資料來源,同時再emit
還給父元件,實作了子組件向父組件傳值。
(學習影片分享:vuejs入門教學、程式設計基礎影片)
以上是vue3組件間怎麼通訊?通訊方式淺析的詳細內容。更多資訊請關注PHP中文網其他相關文章!