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 相关文章推荐
javascript String 的扩展方法集合
Jun 01 Javascript
11款基于Javascript的文件管理器
Oct 25 Javascript
JavaScript中为元素加上name属性的方法
May 09 Javascript
js+css实现的简单易用兼容好的分页
Dec 30 Javascript
jQuery图片切换插件jquery.cycle.js使用示例
Jun 16 Javascript
结合代码图文讲解JavaScript中的作用域与作用域链
Jul 05 Javascript
JS数组返回去重后数据的方法解析
Jan 03 Javascript
Vue+jquery实现表格指定列的文字收缩的示例代码
Jan 09 jQuery
jquery根据name取得select选中的值实例(超简单)
Jan 25 jQuery
Openlayers实现地图全屏显示
Sep 28 Javascript
在vue中使用Echarts画曲线图的示例
Oct 03 Javascript
jQuery实现简单评论区功能
Oct 26 jQuery
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
ThinkPHP3.1新特性之字段合法性检测详解
2014/06/19 PHP
php中使用PHPExcel读写excel(xls)文件的方法
2014/09/15 PHP
使用composer 安装 laravel框架的方法图文详解
2019/08/02 PHP
jMessageBox 基于jQuery的窗口插件
2009/12/09 Javascript
jquery tab插件制作实现代码
2010/06/22 Javascript
JavaScript实现跨浏览器的添加及删除事件绑定函数实例
2015/08/04 Javascript
一起学写js Calender日历控件
2016/04/14 Javascript
通过学习bootstrop导航条学会修改bootstrop颜色基调
2017/06/11 Javascript
vue中关闭eslint的方法分析
2018/08/04 Javascript
解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目
2020/02/09 Javascript
Python实现多线程下载文件的代码实例
2014/06/01 Python
python对指定目录下文件进行批量重命名的方法
2015/04/18 Python
将Python代码嵌入C++程序进行编写的实例
2015/07/31 Python
web.py 十分钟创建简易博客实现代码
2016/04/22 Python
Python读取图片属性信息的实现方法
2016/09/11 Python
python如何获取当前文件夹下所有文件名详解
2019/01/25 Python
pytorch使用Variable实现线性回归
2019/05/21 Python
python文件转为exe文件的方法及用法详解
2019/07/08 Python
解决Atom安装Hydrogen无法运行python3的问题
2019/08/28 Python
Python英文文章词频统计(14份剑桥真题词频统计)
2019/10/13 Python
使用tensorflow实现矩阵分解方式
2020/02/07 Python
Python 远程开关机的方法
2020/11/18 Python
python爬虫看看虎牙女主播中谁最“顶”步骤详解
2020/12/01 Python
详解css3 object-fit属性
2018/07/27 HTML / CSS
美国鞋类购物网站:Shiekh Shoes
2016/08/21 全球购物
全球领先的中国制造商品在线批发平台:DHgate
2020/01/28 全球购物
天游软件面试
2013/11/23 面试题
法学毕业生自我鉴定
2014/01/31 职场文书
预备党员转正思想汇报
2014/09/26 职场文书
办理信用卡工作证明
2014/09/30 职场文书
优秀班组事迹材料
2014/12/24 职场文书
河童之夏观后感
2015/06/11 职场文书
确保减税降费落地生根,用实实在在措施
2019/07/19 职场文书
MYSQL优化之数据表碎片整理详解
2022/04/03 MySQL
Apache Hudi 加速传统的批处理模式
2022/04/24 Servers
Python使用pyecharts控件绘制图表
2022/06/05 Python