本文小編為大家詳細介紹“Vue3的provide/inject怎么使用”，內(nèi)容詳細，步驟清晰，細節(jié)處理妥當，希望這篇“Vue3的provide/inject怎么使用”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

成都網(wǎng)絡公司-成都網(wǎng)站建設公司創(chuàng)新互聯(lián)公司10余年經(jīng)驗成就非凡，專業(yè)從事網(wǎng)站建設、成都網(wǎng)站設計，成都網(wǎng)頁設計，成都網(wǎng)頁制作，軟文營銷，廣告投放等。10余年來已成功提供全面的成都網(wǎng)站建設方案，打造行業(yè)特色的成都網(wǎng)站建設案例，建站熱線：18980820575，我們期待您的來電！

組合式提供與注入

我們也可以在組合式 API 中使用 provide/inject。兩者都只能在當前活動實例的 setup() 期間調(diào)用。

設想場景

假設我們要重寫以下代碼，其中包含一個 TemplateM 組件，該組件使用組合式 API 為 MyMarker 組件提供用戶的位置。

<template>

  <MyMarker />

</template>

<script>

import MyMarker from '../components/MyMarker'

export default {

  components: {

    MyMarker

  },

  provide: {

    location: 'North Pole',

    geolocation: {

      longitude: 90,

      latitude: 135

    }

  }

}

</script>

關于 MyMaker.vue 的代碼如下：

<template>

  <div>

    {{location}} - {{geolocation}}

  </div>

</template>

<!-- src/components/MyMarker.vue -->

<script>

export default {

  inject: ['location', 'geolocation']

}

</script>

我們可以看到效果如下：

上面我們使用的選項式的提供與注入，接下來我們就來使用組合式 API 來改造上面的代碼。

組合式 provide

在 setup() 中使用 provide 時，我們首先從 vue 顯式導入 provide 方法。這使我們能夠調(diào)用 provide 時來定義每個 property。

provide 函數(shù)允許你通過兩個參數(shù)定義 property：

property 的 name (<String> 類型)

property 的 value

使用 TemplateM 組件，我們提供的值可以按如下方式重構：

<template>

  <MyMarker />

</template>

<script>

import MyMarker from '../components/MyMarker'

import {provide} from 'vue'

export default {

  components: {

    MyMarker

  },

  setup() {

    provide('location', 'North Pole')

    provide('geolocation', {

      longitude: 90,

      latitude: 135

    })

  },

}

</script>

我們發(fā)現(xiàn)就是將 provide 對象改造成 provide(key, value) 函數(shù)的形式。

組合式 inject

在 setup() 中使用 inject 時，還需要從 vue 顯式導入它。一旦我們這樣做了，我們就可以調(diào)用它來定義如何將它暴露給我們的組件。

inject 函數(shù)有兩個參數(shù)：

要注入的 property 的名稱

一個默認的值 (可選)

使用 MyMarker 組件，可以使用以下代碼對其進行重構：

<template>

  <div>{{ location }} - {{ geolocation }}</div>

</template>

<!-- src/components/MyMarker.vue -->

<script>

import { inject } from 'vue'

export default {

  name: 'MyMarker',

  setup() {

    const location = inject('location')

    const geolocation = inject('geolocation')

    return {

      location,

      geolocation

    }

  }

}

</script>

我們再次看看效果如下：

響應式

添加響應式

為了增加提供值和注入值之間的響應性，我們可以在提供值時使用 ref 或 reactive。

使用 TemplateM 組件，我們的代碼可以更新如下：

<template>

  <MyMarker />

</template>

<script>

import MyMarker from '../components/MyMarker'

import {provide, ref, reactive} from 'vue'

export default {

  components: {

    MyMarker

  },

  setup() {

    const location = ref('North Pole')

    const geolocation = reactive({

      longitude: 90,

      latitude: 135

    })

    provide('location', location)

    provide('geolocation', geolocation)

  },

}

</script>

現(xiàn)在，如果這兩個 property 中有任何更改，MyMarker 組件也將自動更新！

修改響應式 property

當使用響應式提供/注入值時，建議盡可能，在*提供者*內(nèi)保持響應式 property 的任何更改。

例如，在需要更改用戶位置的情況下，我們最好在 TemplateM 組件中執(zhí)行此操作。

<template>

  <MyMarker />

</template>

<script>

import MyMarker from '../components/MyMarker'

import {provide, ref, reactive} from 'vue'

export default {

  components: {

    MyMarker

  },

  setup() {

    const location = ref('North Pole')

    const geolocation = reactive({

      longitude: 90,

      latitude: 135

    })

    provide('location', location)

    provide('geolocation', geolocation)

    return {

      location

    }

  },

  methods: {

    updateLocation() {

      this.location = "hahaha"

    }

  }

}

</script>

然而，有時我們需要在注入數(shù)據(jù)的組件內(nèi)部更新注入的數(shù)據(jù)。在這種情況下，我們建議提供一個方法來負責改變響應式 property。

<template>

  <MyMarker />

</template>

<script>

import MyMarker from '../components/MyMarker'

import {provide, ref, reactive} from 'vue'

export default {

  components: {

    MyMarker

  },

  setup() {

    const location = ref('North Pole')

    const geolocation = reactive({

      longitude: 90,

      latitude: 135

    })

    const updateLocation = () => {

      location.value = "hahaha"

    }

    provide('location', location)

    provide('geolocation', geolocation)

    provide('updateLocation', updateLocation)

  },

}

</script>

<template>

  <div>{{ location }} - {{ geolocation }}</div>

</template>

<!-- src/components/MyMarker.vue -->

<script>

import { inject } from 'vue'

export default {

  name: 'MyMarker',

  setup() {

    const location = inject('location')

    const geolocation = inject('geolocation')

    const updateLocation = inject('updateLocation')

    return {

      location,

      geolocation,

      updateLocation

    }

  }

}

</script>

最后，如果要確保通過 provide 傳遞的數(shù)據(jù)不會被注入的組件更改，我們建議對提供者的 property 使用 readonly。

<template>

  <MyMarker />

</template>

<script>

import MyMarker from '../components/MyMarker'

import {provide, ref, reactive, readonly} from 'vue'

export default {

  components: {

    MyMarker

  },

  setup() {

    const location = ref('North Pole')

    const geolocation = reactive({

      longitude: 90,

      latitude: 135

    })

    const updateLocation = () => {

      location.value = "hahaha"

    }

    provide('location', readonly(location))

    provide('geolocation', readonly(geolocation))

    provide('updateLocation', updateLocation)

  },

}

</script>

讀到這里，這篇“Vue3的provide/inject怎么使用”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內(nèi)容的文章，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)頁題目：Vue3的provide/inject怎么使用
標題來源：http://jinyejixie.com/article12/ijjggc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、App開發(fā)、移動網(wǎng)站建設、商城網(wǎng)站、品牌網(wǎng)站設計、網(wǎng)站內(nèi)鏈

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)