首页 > 其他分享 >vue 中的provide和inject用法。

vue 中的provide和inject用法。

时间:2023-10-27 11:23:05浏览次数:29  
标签:vue provide 对象 inject key 组件

 provide和inject 可以用作vue组件的通讯-父子/跨级

provide 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的 property。

inject 选项应该是: 一个字符串数组,或 一个对象,对象的 key 是本地的绑定名,value 是: 在可用的注入内容中搜索用的 key (字符串或 Symbol),或 一个对象,

一个父组件相对于其所有的后代组件,会作为依赖提供者。任何后代的组件树,无论层级有多深,都可以注入由父组件提供给整条链路的依赖。

官网链接:https://cn.vuejs.org/guide/components/provide-inject.html#prop-drilling

简单demo:

 打印结果:

 

 

标签:vue,provide,对象,inject,key,组件
From: https://www.cnblogs.com/szc-/p/17791831.html

相关文章

  • VIte+Vue3 打包在本地 双击 index.html 打开项目
    npmi@vitejs/plugin-legacynpmi@babel/preset-envnpmiterserimportlegacyfrom'@vitejs/plugin-legacy';exportdefaultdefineConfig({base:"./",plugins:[vue(),legacy({targets:["defaults","not......
  • Vue+ElementUI 下拉框问题的一个解决方案
    问题描述:Vue使用ElementUI使用下拉框组件时,点击空白处,无法隐藏展开的选项。build项目后,此类问题时有时无,不确定。报错如图:于是自己做了个组件封装一下原生下拉框,解决无法关闭下拉选项问题。代码如下:<template><div:ref="'div_my_select_component_'+rid"v-click-outside=......
  • 31-Vue脚手架-scoped样式
    我们先思考一个问题,如果对School和Student应用样式的话,一般是使用如下方式:src/components/School.vue<template><divclass="demo"><h2>学校名称:{{name}}</h2><h2>学校地址:{{address}}</h2></div></template><script&g......
  • 30-Vue脚手架-plugin插件
    plugin插件功能:用于增强Vue本质:包含install方法的一个对象,install的第一个参数是Vue,第二个以后的参数是插件使用者传递的数据。 src/plugins.js(定义插件)//定义插件(默认暴露)exportdefault{install(Vue){console.log("@@@install")console.log(......
  • [Vue]条件渲染
     1.v-if  写法:    (1)v-if="表达式"    (2)v-else-if="表达式"    (3)v-else="表达式"  适用于:切换频率较低的场景。  特点:不展示的DOM元素直接被移除。  注意:v-if可以和v-else-if、v-else一起使用,但要求结构不能被“......
  • ruby实战手册(13)-vue 3(4)
    目录全局构建全局构建1<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>learnjs</title><basehref="/"><linkhref="styles/style.css"rel=&......
  • OpenTiny Vue 3.11.0 发布:增加富文本、ColorPicker等4个新组件,迎来了贡献者大爆发!
    你好,我是Kagol。非常高兴跟大家宣布,2023年10月24日,OpenTinyVue发布了v3.11.0......
  • vue打印浏览器页面功能的两种实现方法
    目录方法一:通过npm安装插件方法二:手动下载插件到本地总结推荐使用方法二方法一:通过npm安装插件1,安装npminstallvue-print-nb--save2,引入安装好以后在main.js文件中引入1importPrintfrom'vue-print-nb'Vue.use(Print);//注册3,现在......
  • vuex 的数据丢失如何处理?
    方法一:存储在LocalStorage、SessionStorage、IndexDB等。这些都是浏览器的API,可以将数据存储在硬盘上,做持久化存储。在初始化state数据的时候,从localStorage中获取:state={userInfo:localStorage.getItem('userInfo')}由于localStorage不是响应式的,需要手......
  • Vue入门到放弃之旅今日开启第二篇
    绑定class样式、渲染、vue监视、收集表单数据P26-P39Class与Style的理解+用法条件渲染(v-show、v-if)还在持续性更新ing,明天见·····如果有正在学习的同学,需要练习过程中的代码实例和笔记私信我发你,祝你在学习前端的路上BUG满满!!在BUG才会成长!还是希望能对你有所帮助,那怕一点......