provide inject

一般我们在vue中用的比较多的，都是子组件和父组件相互传值，或者是跨组件的vuex

父子组件通信

// 父组件
<template><div><Confirm :data="btnList"></Confirm></div>
</template>
<script>
import Confirm from "@/components/confirm"
export default {components: {Confirm }data () {return {btnList: ['确认', '取消']}}
}
</script>// 子组件
<template><div><div v-for="item in data">{{item}}</div></div>
</template>
<script>
export default {props: {data: {type: Array}},data () {return {}}
}
</script>

vuex

// vuexstate: {village: {name: "张三",id: 1,},},// 页面A
console.log(this.$store.state.village.name) // 张三// 页面B
console.log(this.$store.state.village.id) // 1

简介

provide：Object | () => Object inject：Array | { [key: string]: string | Symbol | Object } provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。是2.2.0版本新增的。这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。
provide 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。在该对象中你可以使用 ES2015 Symbols 作为 key，但是只在原生支持 Symbol 和 Reflect.ownKeys 的环境下可工作。
inject 选项应该是：一个字符串数组，或一个对象，对象的 key 是本地的绑定名，value 是：在可用的注入内容中搜索用的 key (字符串或 Symbol)，或一个对象，该对象的： from 属性是在可用的注入内容中搜索用的 key (字符串或 Symbol) default 属性是降级情况下使用的 value
但是数据并不是响应式，所以适合用于不会进行改变的数据

使用场景

让子孙组件甚至更深层次的组件依然能访问父组件中的数据

// 顶级组件/父组件引用处
var app = new Vue({el: '#app',data () {return {address: '南山区',id: 1}},provide () {return {_this: this // 把整个this传下去，这样所有的组件都能访问当前的父组件的任何属性和方法了}},
})// 子组件/子孙组件
var app = new Vue({el: '#app',inject:['_this'] // 引入父组件provide中抛出的 _thisdata () {return {}},mouthed () {console.log(this._this.address) // 南山区},
})

provide inject相关推荐

export default用法vue_Vue组件通信—provide/inject
前言: 之前在 Vue 中进行组件通信一般都会使用 props,开始使用 provide/inject 是非常偶然的一次尝试. 当时在开发中需要实现祖孙组件,甚至祖祖祖祖孙组件之间的通信,在这种多层级 ...
vue 中provide的用法_聊聊Vue中provide/inject的应用详解
众所周知,在组件式开发中,最大的痛点就在于组件之间的通信.在 Vue 中,Vue 提供了各种各样的组件通信方式,从基础的 props/$emit 到用于兄弟组件通信的 EventBus,再到用于全局数 ...
一文读懂vuex4源码，原来provide/inject就是妙用了原型链?
1. 前言你好,我是若川,欢迎加我微信ruochuan12,加群长期交流学习. 这是学习源码整体架构系列之 vuex4 源码(第十篇).学习源码整体架构系列文章(有哪些必看的JS库):jQuery ...
用provide/inject来实现简单的vuex状态管理功能
在开发的时候,经常会涉及到组件之间的通信.简单的有父子组件的通信,兄弟组件的通信通常可以借助Bus来进行.当然也可以用vuex来进行状态管理,但是,有时候用vuex未免有把简单的问题复杂化. 如果要进 ...
vue 中provide的用法_Vue多级组件provide/inject使用详解
这次给大家带来Vue多级组件provide/inject使用详解,Vue多级组件provide/inject使用的注意事项有哪些,下面就是实战案例,一起来看一下. provide / inject 是 ...
inject 响应式_Vue 3 组合式 provide/inject
组合式提供与注入在之前的章节,我们讲了选项式的提供与注入,今天我们继续讲组合式提供与注入. 我们也可以在组合式 API 中使用 provide/inject.两者都只能在当前活动实例的 setup ...
vue 组件传值$attrs $listeners $bus provide/inject $parent/$children
$attrs 包含了父作用域中不作为prop被识别的特性绑定,当一个组件没有声明props时,这里会包含所有父作用域的绑定, $listeneers 包含了父作用域中的v-on事件监听器,它可以通过v ...
vue3中的provide/inject(提供/注入)
vue3中的provide/inject(提供注入) 在说provide/inject先说一下prop逐级穿透问题. 通常我们从父组件向子组件传递数据时,会用到props.对于只需要传递一层或二层时还 ...
vue2中provide/inject的使用和响应式传值
文章目录前言一.基本用法二.响应式 1.方法一:传递的参数用一个方法返回 2.方法二:把需要传递的参数定义成一个对象总结前言官网概念:这对选项需要一起使用,以允许一个祖先组件向其所有子孙后 ...
vue使用provide / inject 组合刷新页面+单独组件刷新
原文链接:https://www.cnblogs.com/leng12/p/xiaoleng.html 一.this.$router.go(0) 相当于F5刷新,这种方法虽然代码很少,只有一行,但是体 ...

provide inject

简介

使用场景

provide inject相关推荐

最新文章

热门文章