Vue3提供與注入的方法

這篇文章主要介紹“Vue3提供與注入的方法”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“Vue3提供與注入的方法”文章能幫助大家解決問題。

提供與注入

通常，當我們需要將數據從父組件傳遞到子組件時，我們使用 props。想象一下這樣的結構：你有一些深嵌套的組件，而你只需要來自深嵌套子組件中父組件的某些內容。在這種情況下，你仍然需要將 prop 傳遞到整個組件鏈中，這可能會很煩人。

對于這種情況，我們可以使用 provide 和 inject 對。父組件可以作為其所有子組件的依賴項提供程序，而不管組件層次結構有多深。這個特性有兩個部分：父組件有一個 provide 選項來提供數據，子組件有一個 inject 選項來開始使用這個數據。

ue例如，如果我們有這樣的層次結構：

Root

└─ TemplateM

   ├─ TestCom

如果我們的子組件需要調用父組件的方法，我們就可以使用 provide/inject 將父組件的 Vue 實例對象傳遞進去：

<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>

查看瀏覽效果如下：

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

provide: {

    todoLength: this.todos.length // 將會導致錯誤 'Cannot read property 'length' of undefined&mdash;&mdash;

},

要訪問組件實例 property，我們需要將 provide 轉換為返回對象的函數，接下來我們將父組件的實例傳遞到子組件中，這樣我們就能在子組件訪問到父組件的屬性了：

<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>

查看瀏覽效果如下：

這使我們能夠更安全地繼續開發該組件，而不必擔心可能會更改/刪除子組件所依賴的某些內容。這些組件之間的接口仍然是明確定義的，就像 prop 一樣。

實際上，你可以將依賴注入看作是“long range props”，除了：

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

子組件不需要知道 inject property 來自哪里

關于“Vue3提供與注入的方法”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。