這篇文章主要介紹“Vue3提供與注入的方法”的相關(guān)知識(shí)，小編通過(guò)實(shí)際案例向大家展示操作過(guò)程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“Vue3提供與注入的方法”文章能幫助大家解決問(wèn)題。

創(chuàng)新互聯(lián)公司服務(wù)項(xiàng)目包括汝南網(wǎng)站建設(shè)、汝南網(wǎng)站制作、汝南網(wǎng)頁(yè)制作以及汝南網(wǎng)絡(luò)營(yíng)銷(xiāo)策劃等。多年來(lái)，我們專(zhuān)注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，汝南網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶(hù)以成都為中心已經(jīng)輻射到汝南省份的部分城市，未來(lái)相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶(hù)的支持與信任！

提供與注入

通常，當(dāng)我們需要將數(shù)據(jù)從父組件傳遞到子組件時(shí)，我們使用 props。想象一下這樣的結(jié)構(gòu)：你有一些深嵌套的組件，而你只需要來(lái)自深嵌套子組件中父組件的某些內(nèi)容。在這種情況下，你仍然需要將 prop 傳遞到整個(gè)組件鏈中，這可能會(huì)很煩人。

對(duì)于這種情況，我們可以使用 provide 和 inject 對(duì)。父組件可以作為其所有子組件的依賴(lài)項(xiàng)提供程序，而不管組件層次結(jié)構(gòu)有多深。這個(gè)特性有兩個(gè)部分：父組件有一個(gè) provide 選項(xiàng)來(lái)提供數(shù)據(jù)，子組件有一個(gè) inject 選項(xiàng)來(lái)開(kāi)始使用這個(gè)數(shù)據(jù)。

ue例如，如果我們有這樣的層次結(jié)構(gòu)：

Root

└─ TemplateM

   ├─ TestCom

如果我們的子組件需要調(diào)用父組件的方法，我們就可以使用 provide/inject 將父組件的 Vue 實(shí)例對(duì)象傳遞進(jìn)去：

<template>

  <div class="template-m-wrap">

    <test-com :title="lastName"></test-com>

  </div>

</template>

<script>

import TestCom from './TestCom'

export default {

  name: "TemplateM",

  components: {

    TestCom

  },

  provide: {

    parent: "this"

  },

  data() {

    return {

      firstName: 'dsdsdd',

      lastName: 'Ken'

    };

  },

  methods: {

    submit(options) {

      console.log(options)

    }

  },

};

</script>

然后在子組件注入父組件的 parent 屬性：

<template>

  <div class="test-com-wrap">

    {{ title }}

    <button @click="click">按鈕</button>

  </div>

</template>

<script>

export default {

  name: "TestCom",

  props: {

    title: {

      type: String,

      default: "",

    },

  },

  inject: ['parent'],

  emits: ['click-event'],

  created() {

    console.log(this.$attrs)

  },

  methods: {

    click(e) {

      console.log(this.parent)

      this.$emit('click-event', e)

    }

  }

};

</script>

查看瀏覽效果如下：

但是，如果我們嘗試在此處提供一些組件實(shí)例 property，則這將不起作用：

provide: {

    todoLength: this.todos.length // 將會(huì)導(dǎo)致錯(cuò)誤 'Cannot read property 'length' of undefined&mdash;&mdash;

},

要訪(fǎng)問(wèn)組件實(shí)例 property，我們需要將 provide 轉(zhuǎn)換為返回對(duì)象的函數(shù)，接下來(lái)我們將父組件的實(shí)例傳遞到子組件中，這樣我們就能在子組件訪(fǎng)問(wèn)到父組件的屬性了：

<template>

  <div class="template-m-wrap">

    <test-com :title="lastName"></test-com>

  </div>

</template>

<script>

import TestCom from "./TestCom";

export default {

  name: "TemplateM",

  components: {

    TestCom,

  },

  provide() {

    return { parent: this };

  },

  data() {

    return {

      firstName: "dsdsdd",

      lastName: "Ken",

    };

  },

  methods: {

    submit(options) {

      console.log(options);

    },

  },

};

</script>

在子組件中使用 parent:

<template>

  <div class="test-com-wrap">

    {{ title }}

    <button @click="click">按鈕</button>

  </div>

</template>

<script>

export default {

  name: "TestCom",

  props: {

    title: {

      type: String,

      default: "",

    },

  },

  inject: ['parent'],

  emits: ['click-event'],

  created() {

    console.log(this.$attrs)

  },

  methods: {

    click(e) {

      console.log(this.parent)

      this.$emit('click-event', e)

    }

  }

};

</script>

查看瀏覽效果如下：

這使我們能夠更安全地繼續(xù)開(kāi)發(fā)該組件，而不必?fù)?dān)心可能會(huì)更改/刪除子組件所依賴(lài)的某些內(nèi)容。這些組件之間的接口仍然是明確定義的，就像 prop 一樣。

實(shí)際上，你可以將依賴(lài)注入看作是“l(fā)ong range props”，除了：

父組件不需要知道哪些子組件使用它提供的 property

子組件不需要知道 inject property 來(lái)自哪里

關(guān)于“Vue3提供與注入的方法”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。

分享名稱(chēng)：Vue3提供與注入的方法
鏈接地址：http://vcdvsql.cn/article34/pepcpe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供、軟件開(kāi)發(fā)、網(wǎng)站收錄、響應(yīng)式網(wǎng)站、服務(wù)器托管、網(wǎng)站排名

廣告

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