vue 解决provide和inject响应的问题


Posted in Javascript onNovember 12, 2020

官网上说provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而,如果你传入了一个可监听的对象,那么其对象的属性还是可响应的。

provide:

Object | () => Object(一个对象或返回一个对象的函数)

inject:

Array | { [key: string]: string | Symbol | Object }(一个字符串数组,或一个对象,对象的 key 是本地的绑定名)

要实现父子组件响应,父组件传递的数据类型必须是对象Object,子组件接收的数据类型必须是对象Object,其他数据类型都是不好使的

provide和inject响应的例子:

父组件:

<template>
 <div class="menu">
  <label>父组件输入框:</label>
  <input v-model="level.name" @change="levelChange(level.name)"/>
  <!-- 子组件 -->
  <my-list></my-list>
 </div>
</template>
<script>
import MyList from '@/pages/user/children/MyList'

export default {
 components:{MyList},

 provide(){
  return {
   userLevel:this.level,
  } 
 },

 data(){
  return{
   level:{name:"初始化"},
  } 
 },

 methods:{
  levelChange(val){
   this.userLevel = this.level;
   console.log(this.userLevel )//可以打印出对象属性name值改变了
  }
 }
}
</script>

子组件(MyList.vue)

<template>
 <div class="my-list"> 
  <p>子组件接收数据:{{userLevel.name}}</p>
  <label>父组件输入框:</label><input type="text" v-model="userLevel.name">
 </div>
</template>
<script>
export default {
 // inject:['userLevel'],
 inject:{
  userLevel:{
   default:()=>{}
  },
 },

 data(){
  return{
  }
 } 
}
</script>

输出:

初始化:

vue 解决provide和inject响应的问题

修改父组件数据:输入框的值是"初始",子组件也输出"初始

vue 解决provide和inject响应的问题

修改子组件数据:输入框的值是"子组件",父组件输入框也显示"子组件"

vue 解决provide和inject响应的问题

好啦,provide和inject实现响应,父组件的数据修改影响了子组件的更新,子组件的数据修改同样影响了父组件的更新。

数据格式为对象Object的类型,父组件修改数据影响子组件,子组件修改数据影响父组件,感觉和对象的存储有关,对象格式数据存储的是指针而不是数据,所以父子组件其实是用的同一个对象,修改的也是同一个对象,因此会实现双向响应改变,不知道我这样理解的是由有问题。

补充知识:vue监听赋值值以及provide与inject

vue 当父组件 改变 子组件的props 却不变

watch: {
 'oState': function (val,oldval) {
  this.getOrderList({orderStatus: this.getOrderState(this.oState), pageSize: 1})
 },
 // 深度 watcher
  c: {
  handler: function (val, oldVal) { /* ... */ },
  deep: true
  },
 },

$refs

<ul class="comment-list" v-if="list" ref="commentList"></ul>
 scrollToTop () {
 this.$refs.commentList.scrollTop = 0
 }

$el

this.$refs.studentListDialog.$el.querySelector('.el-dialog')

vm.$once( event, callback )

参数:

{string} event

{Function} callback

用法:

监听一个自定义事件,但是只触发一次,在第一次触发之后移除监听器。

vm.$off( [event, callback] )

参数:

{string | Array<string>} event (只在 2.2.2+ 支持数组)

{Function} [callback]

用法:

移除自定义事件监听器。

如果没有提供参数,则移除所有的事件监听器;

如果只提供了事件,则移除该事件所有的监听器;

如果同时提供了事件与回调,则只移除这个回调的监听器。

vm.$destroy()

用法:

完全销毁一个实例。清理它与其它实例的连接,解绑它的全部指令及事件监听器。

触发 beforeDestroy 和 destroyed 的钩子。

当生成vue实例后,当再次给数据赋值时,有时候并不会自动更新到视图上去

obj:{
 arr:[]
 }

双向绑定后无法直接改变obj.arr

需要新增一个arr赋值或者

this.$set(this.ruleForm, 'date', time)

vue.set(target,key,value)

参数

{object | Array} target

{string | number} key

{any} value

this.$set()和Vue.set()本质方法一样,前者可以用在methods中使用。

set方法调用时,可以触发页面全部重新渲染。

provide:Object | () => Object

inject:Array<string> | { [key: string]: string | Symbol | Object }

这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。如果你熟悉 React,这与 React 的上下文特性很相似。

provide 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。在该对象中你可以使用 ES2015 Symbols 作为 key,但是只在原生支持 Symbol 和 Reflect.ownKeys 的环境下可工作。

inject 选项应该是:

一个字符串数组,或

一个对象,对象的 key 是本地的绑定名,value 是:

在可用的注入内容中搜索用的 key (字符串或 Symbol),或

一个对象,该对象的:

from 属性是在可用的注入内容中搜索用的 key (字符串或 Symbol)

default 属性是降级情况下使用的 value

提示:provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而,如果你传入了一个可监听的对象,那么其对象的属性还是可响应的。

示例:

// 父级组件提供 ‘foo'

 var Provider = {
 provide: {
  foo: 'bar'
 },
 // ...
 }

// 子组件注入 'foo'

 var Child = {
 inject: ['foo'],
 created () {
  console.log(this.foo) // => "bar"
 }
 // ...
 }

以上这篇vue 解决provide和inject响应的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用js简单实现了tree树菜单
Nov 20 Javascript
Javascript中使用parseInt函数需要注意的问题
Apr 02 Javascript
用户代理字符串userAgent可实现的四个识别
Sep 20 Javascript
JS实现3D图片旋转展示效果代码
Sep 22 Javascript
Jquery Mobile 自定义按钮图标
Nov 18 Javascript
AngularJs篇:使用AngularJs打造一个简易权限系统的实现代码
Dec 26 Javascript
jQuery插件echarts实现的循环生成图效果示例【附demo源码下载】
Mar 04 Javascript
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 jQuery
浅谈实现vue2.0响应式的基本思路
Feb 13 Javascript
vue如何引入sass全局变量
Jun 28 Javascript
vue动态子组件的两种实现方式
Sep 01 Javascript
Vuex的API文档说明详解
Feb 05 Javascript
vue的$http的get请求要加上params操作
Nov 12 #Javascript
vue 获取url参数、get参数返回数组的操作
Nov 12 #Javascript
Vue+Spring Boot简单用户登录(附Demo)
Nov 12 #Javascript
vue 获取url里参数的两种方法小结
Nov 12 #Javascript
带你使用webpack快速构建web项目的方法
Nov 12 #Javascript
vue项目实现减少app.js和vender.js的体积操作
Nov 12 #Javascript
详解vue 组件的实现原理
Nov 12 #Javascript
You might like
编写PHP的安全策略
2006/10/09 PHP
ThinkPHP的cookie和session冲突造成Cookie不能使用的解决方法
2014/07/01 PHP
谈谈PHP中substr和substring的正确用法及相关参数的介绍
2015/12/16 PHP
JavaScript Array扩展实现代码
2009/10/14 Javascript
JavaScript页面刷新与弹出窗口问题的解决方法
2010/03/02 Javascript
Js 时间间隔计算的函数(间隔天数)
2011/11/15 Javascript
如何将一个String和多个String值进行比较思路分析
2013/04/22 Javascript
js获取事件源及触发该事件的对象
2013/10/24 Javascript
jquery图片切换插件
2015/03/16 Javascript
animate 实现滑动切换效果【实例代码】
2016/05/05 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
2016/05/09 Javascript
jQuery 遍历map()方法详解
2016/11/04 Javascript
js中的DOM模拟购物车功能
2017/03/22 Javascript
使用live-server快速搭建本地服务器+自动刷新的方法
2018/03/09 Javascript
vue axios整合使用全攻略
2018/05/24 Javascript
微信小程序日历效果
2018/12/29 Javascript
微信小程序sessionid不一致问题解决
2019/08/30 Javascript
Vue实现跑马灯效果
2020/05/25 Javascript
Vant 中的Toast设置全局的延迟时间操作
2020/11/04 Javascript
[49:35]LGD vs OG 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
Python-基础-入门 简介
2014/08/09 Python
Python爬虫DNS解析缓存方法实例分析
2017/06/02 Python
Python 将RGB图像转换为Pytho灰度图像的实例
2017/11/14 Python
python实现机器学习之元线性回归
2018/09/06 Python
python实现控制台输出彩色字体
2020/04/05 Python
荷兰本土平价百货:HEMA
2017/10/23 全球购物
在校生钳工实习自我鉴定
2013/09/19 职场文书
教师辞职报告范文
2014/01/20 职场文书
小学安全教育材料
2014/02/17 职场文书
预防传染病方案
2014/06/14 职场文书
竞聘演讲稿开场白
2014/08/25 职场文书
投资意向协议书
2015/01/29 职场文书
教师学期个人总结
2015/02/11 职场文书
尼克胡哲观后感
2015/06/08 职场文书
Python Django模型详解
2021/10/05 Python
宝塔更新Python及Flask项目的部署
2022/04/11 Python