本文開始，首先我們來看這兩個詞的意思，provide：提供 inject：注入
用處：
父組件可以向其所有子組件傳入資料，而“不管子組件層次結構有多深（非父子和父子咱都能傳）”
特性：
父組件有一個provide選項來提供資料
子組件有一個inject選項來開始使用這個資料
本文參考組件層級：
Index組件
\ A組件
\ B組件
代碼區：
場景1：我想要Index組件直接給b組件傳值
Index組件代碼：
<template>
<div>
<div>我是index組件</div>
<A></A>
</div>
</template>
<script>
import A from '@/components/A.vue'
export default {
components: {
A
},
data() {
return {}
},
provide: {
text: '我是父組件的provide資訊666'
}
}
</script>
<style></style>
接收的B組件代碼：
<template>
<div>
<div>我是B組件</div>
<div>{{ msg }}</div>
</div>
</template>
<script>
export default {
name: 'B',
data() {
return {
msg: this.text
}
},
inject: ['text']
}
</script>
<style></style>
當然，provide還有第二種寫法，寫成函式的形式
Index組件代碼：
<template>
<div>
<div>我是index組件</div>
<A></A>
</div>
</template>
<script>
import A from '@/components/A.vue'
export default {
components: {
A
},
data() {
return {
arr: ['1', '2', '3']
}
},
// provide: {
// text: '我是父組件的provide資訊666'
// }
provide() {
return {
arr: this.arr
}
}
}
</script>
<style></style>
B組件代碼：
<template>
<div>
<div>我是B組件</div>
<div>{{ msg }}</div>
<ul v-for="(item, index) in arr" :key="index">
<li>{{ item }}</li>
</ul>
</div>
</template>
<script>
export default {
name: 'B',
data() {
return {
msg: this.text
}
},
inject: ['arr']
}
</script>
<style></style>
運行截圖：
對比：
如果使用常見的props方式傳值需要：index->a->b
如果使用provide/inject方式傳值：index->a index->b
本文如有錯誤，還望各位批評指標，希望能幫助到大家更好的理解vue的provide和inject
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/527882.html
標籤：其他
上一篇：JS 探索 this 指向問題