首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vue 3 提供与注入

Vue 3 提供与注入

作者头像
公众号---人生代码
发布2020-11-03 16:56:45
6800
发布2020-11-03 16:56:45
举报
文章被收录于专栏:人生代码人生代码

提供与注入

通常,当我们需要将数据从父组件传递到子组件时,我们使用 props。想象一下这样的结构:你有一些深嵌套的组件,而你只需要来自深嵌套子组件中父组件的某些内容。在这种情况下,你仍然需要将 prop 传递到整个组件链中,这可能会很烦人。

对于这种情况,我们可以使用 provideinject 对。父组件可以作为其所有子组件的依赖项提供程序,而不管组件层次结构有多深。这个特性有两个部分:父组件有一个 provide 选项来提供数据,子组件有一个 inject 选项来开始使用这个数据。

Provide/inject scheme

例如,如果我们有这样的层次结构:

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`
},

要访问组件实例 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 来自哪里
本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2020-10-24,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 CryptoCode 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 提供与注入
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档