木灵鱼儿
阅读:1968
provide inject 跨组件传参 + 响应式数据
父组件与子组件的传参,使用的是props,如果是父组件与孙子组件传参,大部分可能会采用递归的方式,也就是子组件props接收,然后再props传给孙子组件。或者使用vuex。
但如果是迭代的方式,组件的层级越深,不断迭代的props会是代码越来越无法维护,冗余。
于是官方出了provide inject。
provide有父组件设置,inject由子组件接收,他们的特性:
- 祖先组件不需要知道哪些后代组件使用它提供的属性
- 后代组件不需要知道被注入的属性来自哪里
例子:
父组件
<script>
export default {
provide: {
foo: 'bar'
},
}
</script>
孙子组件
<script>
export default {
inject: ['foo'],
}
</script>
用法和props差不多,inject也有default属性
<script>
export default {
inject: {
foo:{
default:"默认值"
}
}
}
</script>
如果默认的是一个引用类型,也要像props一样,用一个工厂函数抛出
<script>
export default {
inject: {
foo:{
default: ()=> [1,2,3]
}
}
}
</script>
如果inject里的key和其他属性发生了冲突,我们可以像model那样,有一个声明
<script>
export default {
inject: {
foo1:{
from: "foo",
default: ()=> [1,2,3]
}
}
}
</script>
from表示其源。
提示:
provide
和inject
绑定并不是可响应的。这是刻意为之的。然而,如果你传入了一个可监听的对象,那么其对象的 property 还是可响应的。
也就是说,如果传入的是非引用类型的值,父组件修改provide中的属性值,孙子组件并不会响应其变化。
如果是一个引用类型,那么是可以响应到父组件的变化,我们甚至可以使用一个函数来达到响应变化的效果
响应式
函数方式
父组件
<script>
export default {
data(){
return {
color:"blue"
}
},
provide() {
return {
color: this.getColor
}
},
methods:{
getColor() {
return this.color;
},
}
}
</script>
孙子组件
<template>
<span>{{color()}}</span>
</template>
<script>
export default {
inject: ['color'],
}
</script>
通过函数的方式,当父组件中data的color的值发生了变化,子组件依旧可以响应到。
注意一点,如果是传string,可以使用provide为一个对象的形式,如果你要在provide的里面通过this,来获取上下文数据,那么就要如上,使用方法的形式,return出一个对象才行。
性能上估计不太好。
引用类型{}
<script>
export default {
data(){
return {
color:{
get:"blue"
}
}
},
provide() {
return {
color: this.color
}
},
}
</script>
孙子组件
<template>
<span>{{color.get}}</span>
</template>
<script>
export default {
inject: ['color'],
}
</script>
这样依旧可以响应到变化,但是不怎么建议使用。
Vue.observable()
这是vue 2.6版本新增的一个api,用于创建一个可监控的对象,大概用起来和vuex相差不了多少,感觉就是一个小型vuex的快速建成方式。
父组件
<script>
import Vue from "vue";
export default {
provide() {
this.theme = Vue.observable({
color: "blue",
});
return {
theme: this.theme,
};
},
}
</script>
孙子组件
<template>
<span>{{theme.color}}</span>
</template>
<script>
export default {
inject: ['theme'],
}
</script>
这样也可以响应到父组件的color值变化。
但是必须是vue 2.6版本,vue-template-compiler也要同步
//升级vue版本npm
update vue -S
//或者
yarn add vue -Snpm update vue-template-compiler -D
//或者
yarn add vue-template-compiler -D
Vue.observable如何更新数据
你可以直接this.theme.color="xxx"
来更新,也可以封装一个类似于vuex的mutation方法对象集合。
import vue from 'vue';
export const store = vue.observable({count: 0});
export const mutation = {
setCount( count ){
store.count = count;
}
}
这种方式可以单独做个js文件,也可以改动一下丢在组件内。
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。
相关推荐
vuex 动态注册和卸载模块
概述一般情况下,我们的vuex数据都是静态的,store在首次初始化后数据的格式就定好了,在日常使用中也确实应该这么做。但是,随着业务的发展,vuex可能会变得非常的大,或者在多页面打包的时候,每个页面都需要vuex,但是如果把每个页面的vuex都写在一起,你会发现,原来我a页面可能只需要30个vuex的数据监听,但是会多出来其他页面的数据,这显然不应该的。所以,我们需要一个能够动态加载模块的方法,每个页面动态加载自己的vuex数据使用。api了解vuex官方提供了几个api:registerModule动态注册模块apiunregisterModule卸载一个动态模块hasModule...
vue-i18n 的使用方式
安装vue2版需要安装8.x版本的,9.x的是vue3版本使用上大同小异。vue2安装:yarn add vue-i18n@8vue3安装:yarn add vue-i18n封装官方虽然支持很不错的用法,但是自定义处理是难免的。vue3文件目录结构├─ src │ ├─ language │ │ ├─ lang │ │ │ ├─ en.json │ │ │ └─ zh.json │ │ ├─ core │ │ │ ├─ i18n.ts │ │ │ ├─ customization.ts │ │ │ └─ language.ts │ │ ├─ i...
vue3 全局挂载和调用的方式
全局挂载vue3 对全局挂载做了调整,对全局挂载的方法增加的命名空间,用于独立存放,所以原先通过原型挂载的方式不推荐使用了。import { createApp } from "vue"; const app = createApp({}) app.config.globalProperties.$http = () => {}组件内调用最麻烦的<script lang="ts"> import { defineComponent,getCurrentInstance } from "vue"; ex...
vue router 一个重定向页面的思路
当项目需要和其他项目进行沟通的时候,往往常见的做法就是,我在a网站点击一个按钮,在链接中携带query参数啥的,然后去访问b网站页面。此时可能会有两种情况:跳转的链接就是b网站的具体链接地址。跳转的链接是b网站的一个跳板,跳板会对参数做一些操作,然后进行重定向。两种做法都各有优势:第一种省事简单,但是如果以后b网站链接层级发生变化,那么就会导致链接不可能,到时候还需要进行修改,很痛苦。第二种的话,我们需要写一个跳板页面,但是通过一些参数要求,甚至自身加上一些逻辑处理,那么他的功能性会更强一些。那么,在vue中,做一个重定向页面,怎么做?思路思路1利用路由守卫,当链接上存在某个参数的时候,...
vue 过滤器 驼峰与短横线相互转换的方法
自己去注册吧,提供的是es6导出的方法//短横线转驼峰 export const dashToHump = function (value) { const textArr = value.split("-"); return textArr.map((item, index) => { if (index === 0) return item.toLowerCase(); return item.slice(0, 1).toUpperCase() + item.slice(1); }) .join("")...
使用vue.draggable拖拽组件遇到的一些问题
资源github:vue.draggable中文文档:vue.draggable中文文档api参考文档:sortablejsvue.draggable是基于sortablejs的vue封装,所有有些api官方并不会有过多的解释,可以去sortablejs查看下拖拽无法触发页面滚动当拖拽的内容大于页面宽高时,页面滚动就是一个必然的需求,但是vue.draggable默认情况并不能触发滚动。官方设置里有一个属性:scroll,如果为true时就能触发滚动,但是默认属性就是true;所以这个配置可以说是无效的。解决方案:cannot set scrollSensitivity19年的时候就有提...

关于 element table多选里面实现单选的偷懒做法
在elment的table多选中增加单选逻辑,这个也不能说产品的问题,单选和多选应该算是比较基础的应用,但是,element并没有对单选做支持。于是我有了一个偷懒思路!前提由于table的一键全选按钮无法进行细致化操作,无法控制点击时选中的数量,只能在选中后的回调里面处理,所以,我的做法是单选时隐藏这个按钮。 selectable方法可以返回布尔值来表示当前格子是否允许勾选或者取消,其实就是禁用的意思。<el-table-column type="selection" :selectable="onSelectable"></el...

关于element el-input 输入的值需要转number的问题
前言经常是一个input表单需要输入数字和小数,那么如果仅仅是要求数据格式,我们可以通过表单校验的方式对输入的值进行限制,具体的做法,我之前就写过文章:《element input表单验证数字类型方法大全》里面有关于数字类型校验的方式,基本涵盖了日常需求。但是,仅仅就只能这样吗???no,如果后端要求你输入的数字,提交给他的时候也必须是数字类型呢?要知道,即便我们做了表单校验,校验它输入的必须是数字格式,但是input本身就是一个string类型的值,即便你设置type="number"也无法改变它值的类型。有人说用.number;其实这个问题之前就聊过了,这个修饰符...
关于element table合并格子的思路
效果图需要将第一个col值相同的格子row进行合并。实现element的表格提供了一个span-method方法,该方法会为每个格子运行一次。比如,有一个3行的表格,每行4个格子,那么span-method就会运行:3*4=12;共计12次。有时候我们并不需要每个格子都运行一次,在上面的需求上,我们只需要每行运行一次就行了,所以我们可以通过span-method的参数中,解构出columnIndex每行每个格子的下标。<script> export default { methods: { spanMethod({columnIndex}) { if(...

.native修饰符 做了什么
估计也就只有我这个憨憨一直以为native会自动将事件传给组件的input那些元素,比如按键事件啊,点击事件啊。然后,我就一直很好奇,他是怎么做到准确绑定的?然而事实上,他就是一次事件的绑定而已。<base-input v-on:focus="onFocus"></base-input>base-input<template> <div class="input-item"> <input type="text"> </div> </t...