专栏首页人生代码Vue 3 提供与注入

Vue 3 提供与注入

提供与注入

通常,当我们需要将数据从父组件传递到子组件时,我们使用 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 来自哪里

本文分享自微信公众号 - 志学Python(lijinwen1996329ken),作者:志学Python

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-10-24

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 可重用性的6个级别

    这是有关级别的基本概述。我即将举行的课程“ 可重用组件 ”探讨了每个组件以及如何充分利用它们。

    公众号---人生代码
  • 你绝对不知道的 Vue 技巧 - 三

    什么是指令?指令就是你女朋友指着你说,“那边搓衣板,跪下,这是命令!”。开玩笑啦,程序员哪里会有女朋友。通过上一节我们开发了一个loading组件,开发完之后,...

    公众号---人生代码
  • 干货来了,vue 3.0 自定义指令变化

    组件上的自定义指令使用将遵循与Fallthrough行为RFC属性中讨论的相同规则。它将通过v-bind="$attrs"由子组件控制。

    公众号---人生代码
  • Vue 与 React 父子组件之间的家长里短

    FinGet
  • React学习(最终篇)—— 高阶应用:高阶组件(HOCs)

    高阶组件(higher-order components:以下简称HOC或HOC组件)是一个React组件复用的高级技巧。HOCs本身并不是React的API接...

    随风溜达的向日葵
  • 腾讯Android研发岗必刷真题:说下组件之间的跳转和组件通信原理机制

    今天则会从更小细粒度入手,主要讲讲在组件化架构下组件与组件之间通信机制是如何、包括所谓的UI跳转,其实也是组件化通信,只不过它稍微特殊点,单独抽取出来而已。学习...

    Android技术干货分享
  • 【微服务】139:Vue之组件化开发

    和Java中一样,js中也是使用new Date()创建日期对象,可以将毫秒值转换成日期。

    刘小爱
  • 前端组件设计原则

    我在最近的工作中开始使用 Vue 进行开发,但是我在上一家公司积累了三年以上 React 开发经验。虽然在两种不同的前端框架之间进行切换确实需要学习很多,但是二...

    ConardLi
  • 【腾讯轻舟Raft】后台组件的治理思路

    | 导语 腾讯轻舟平台(RAFT,Rapid Application Framework of Tencent)是一个致力于组件治理,为创新型应用提供“端云一...

    腾讯大讲堂
  • 说一句最好的Flutter开源项目也不过分

    老孟导读:首先声明此项目不是我完成的,是大神`张风捷特烈`呕心沥血之作,对初学者有极大对帮助,当然我获得了大神`张风捷特烈`的授权,所以我不是盗版哦。

    老孟Flutter

扫码关注云+社区

领取腾讯云代金券