iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue2.0/3.0中provide和inject的用法示例
  • 569
分享到

vue2.0/3.0中provide和inject的用法示例

2024-04-02 19:04:59 569人浏览 独家记忆
摘要

目录1、provide/inject有什么用?2、provide/inject使用方式具体用法:vue3.0用法总结1、provide/inject有什么用? 常用的父子组件通信方

1、provide/inject有什么用?

常用的父子组件通信方式都是父组件绑定要传递给子组件的数据,子组件通过props属性接收,一旦组件层级变多时,采用这种方式一级一级传递值非常麻烦,而且代码可读性不高,不便后期维护。

Vue提供了provide和inject帮助我们解决多层次嵌套嵌套通信问题。在provide中指定要传递给子孙组件的数据,子孙组件通过inject注入祖父组件传递过来的数据。

使用场景:由于vue有$parent属性可以让子组件访问父组件。但孙组件想要访问祖先组件就比较困难。通过provide/inject可以轻松实现跨级访问祖先组件的数据

2、provide/inject使用方式

  provide:是一个对象 / 返回对象的函数。

       里面是属性和属性值。

  注意:子孙层的provide会掩盖祖父层provide中相同key的属性值

  inject:一个字符串数组,或者是一个对象。

     属性值可以是一个对象,包含from和default默认值,from是在可用的注入内容中搜索用的 key (字符串或 Symbol),意思就是祖父多层provide提供了很多数据,from属性指定取哪一个key;

    default指定默认值。

具体用法:

父组件


<template>
  <div>
 
  </div>
</template>

<script>
export default {
  components: {
    MergeTipDialog,
    BreakNetTip
  },
  data () {
    return {
      isshow: false,
      isRouterAlive: true
  },

// 父组件中返回要传给下级的数据  可以使函数,也可以是data中的数据
  provide () {
    return {
      reload: this.reload    isShow:this.isShow
    }
  },
  methods: {
    reload () {
      this.isRouterAlive = false
      this.$nextTick(() => {
        this.isRouterAlive = true
      })
    }
  }
}
</script>

子孙


<template>
  <popup-assign
    :id="id"
    @success="successHandle"
  >
    <div class="confirm-d-tit"><span class="gray-small-btn">{{ name }}</span></div>
    <strong>将被分配给</strong>
    <a
      slot="reference"
      class="unite-btn"
    >
      指派
    </a>
  </popup-assign>
</template>
<script>
import PopupAssign from '../PopupAssign'
export default {
//引用vue reload方法 内容 isShow
  inject: ['reload','isShow'],
  components: {
    PopupAssign
  },
methods: {
    async successHandle () {
      this.reload()
    }
  }
}
</script>

vue3.0用法

父组件

 子组件

总结

到此这篇关于vue2.0/3.0中provide和inject用法的文章就介绍到这了,更多相关vue中provide和inject用法内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: vue2.0/3.0中provide和inject的用法示例

本文链接: https://www.lsjlt.com/news/135078.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue2.0/3.0中provide和inject的用法示例
    目录1、provide/inject有什么用?2、provide/inject使用方式具体用法:vue3.0用法总结1、provide/inject有什么用? 常用的父子组件通信方...
    99+
    2024-04-02
  • vue2和vue3中provide/inject的基本用法示例
    目录前言vue2基本用法:1.provide2.inject如何成为响应式?1.方法一:函数方法2.方法二:传递thisvue3的基本用法:总结前言 昨天看一个项目代码看到了prov...
    99+
    2023-05-17
    vue中provideinject vue中provide的用法 vue中的inject
  • Vue 中 provide和inject的使用
    目录前言Vue中如何使用provide和inject在 Vue 中使用注入访问父数据前言 在Vue中我们可以很方便的通过父组件往子组件传递属性,Props是我们将数据传递到子组件的主...
    99+
    2022-11-13
    Vue 中 provide的使用 Vue 中inject的使用
  • Vue3中的provide、inject的用法
    目录一. 场景再现二. 传递 Props三. provide 和 inject四. provide 的进阶用法五. 源码六. 思考题前言: 在前端项目中牵扯的最多的莫过于组件之间的传...
    99+
    2023-03-06
    Vue3 provide inject使用 Vue3 provide inject
  • vue3中 provide 和 inject 用法及原理
    前言: 在父子组件传递数据时,通常使用的是 props 和 emit,父传子时,使用的是 props,如果是父组件传孙组件时,就需要先传给子组件,子组件再传给孙组件,如果多个子组件或...
    99+
    2024-04-02
  • vue3中provide和inject的使用
    1.provide 和 inject 的讲解 provide和inject可以实现嵌套组件之间进行传递数据。 这两个函数都是在setup函数中使用的。 父级组件使用provide向...
    99+
    2024-04-02
  • vue3中provide和inject怎么用
    这篇文章将为大家详细讲解有关vue3中provide和inject怎么用,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。provide 和 inject 的讲解provide和inject可以实现嵌套组件之...
    99+
    2023-06-20
  • vue3中provide和inject怎么使用
    本篇内容主要讲解“vue3中provide和inject怎么使用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue3中provide和inject怎么使用”吧!前言:在父子组件传递数据时,通常...
    99+
    2023-06-21
  • Vue中的provide和inject怎么使用
    今天小编给大家分享一下Vue中的provide和inject怎么使用的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。在vue2...
    99+
    2023-07-06
  • 一文聊聊Vue中provide和inject的使用方法
    Vue中如何使用provide与inject?下面本篇文章就来给大家介绍一下Vue中provide和inject的使用方法,希望对大家有所帮助!在vue2.0里面provide与inject是以选项式(配置)API的方式在组件中进行使用的,...
    99+
    2023-05-14
    Vue javascript
  • Vue3中的provide、inject怎么使用
    一. 场景再现先别着急考虑标题这个 api 的含义。在这里我先动手写一个比较常见的场景。所对应的组件内部代码比较简单,这里我就不展示了,逻辑上就是 这三个组件层层引用。所对应的页面效果如下:如上图,这是一个在项目中很常见的一个场景,三层嵌套...
    99+
    2023-05-14
    Vue3 provide inject
  • Vue 2.0中依赖注入provide/inject组合的示例分析
    这篇文章主要介绍Vue 2.0中依赖注入provide/inject组合的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!用法-------------------------...
    99+
    2024-04-02
  • Vue3插件中怎么使用Provide和Inject
    今天小编给大家分享一下Vue3插件中怎么使用Provide和Inject的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。为什么...
    99+
    2023-07-04
  • Vue3中Provide和Inject的实现原理是什么
    这篇文章主要介绍了Vue3中Provide和Inject的实现原理是什么的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Vue3中Provide和Inject的实现原理是什么文章都会有所收获,下面我们一起来看看吧...
    99+
    2023-06-29
  • 解析vue的provide和inject使用方法及其原理
    首先来谈谈我们为什么要使用provide/inject呢?对于爷爷和孙子组件之间,甚至太爷爷组件与孙子组件通信我们用vuex不就ok了。 那事实的确如此,但是,请听我说但是,有时候你...
    99+
    2024-04-02
  • vue中的依赖注入provide和inject简单介绍
    vue中的依赖注入 provide 和 inject vue中的依赖注入 provide 和 inject provide 选项允许我们指定我们想要提供给后代组件的数据/方法。 下...
    99+
    2022-11-13
    vue依赖注入provide和inject vue依赖注入
  • vue2中provide/inject的使用与响应式传值详解
    目录前言一、基本用法二、响应式1.方法一:传递的参数用一个方法返回2.方法二:把需要传递的参数定义成一个对象总结前言 官网概念:这对选项需要一起使用,以允许一个祖先组件向其所有子孙后...
    99+
    2024-04-02
  • VUE中如何调用高德地图获取当前位置(VUE2.0和3.0通用)
    1、去高德开放平台获取高德地图KEY 地址:https://lbs.amap.com/ 注意:这里一定要选择WEB端的KEY,不要选择WEB服务的KEY,否则拿不到数据 2、去项目中...
    99+
    2023-05-15
    vue中使用高德地图 vue 高德地图定位 vue获取当前地理位置
  • Vue2.0中观察者模式的示例分析
    这篇文章主要介绍了Vue2.0中观察者模式的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。1.Vue1.0 事件的广播与接收(观察者...
    99+
    2024-04-02
  • vue2.0中虚拟DOM渲染的示例分析
    这篇文章主要为大家展示了“vue2.0中虚拟DOM渲染的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“vue2.0中虚拟DOM渲染的示例分析”这篇文章吧...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作