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提供与注入的方法”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注亿速云行业资讯频道，小编每天都会为大家更新不同的知识点。