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 相关文章推荐
jQuery解决iframe高度自适应代码
Dec 20 Javascript
javascript两段代码,两个小技巧
Feb 04 Javascript
javascript window.confirm确认 取消对话框实现代码小结
Oct 21 Javascript
使用jquery mobile做幻灯播放效果实现步骤
Jan 04 Javascript
关于jquery的多个选择器的使用示例
Oct 18 Javascript
解析offsetHeight,clientHeight,scrollHeight之间的区别
Nov 20 Javascript
js实时获取并显示当前时间的方法
Jul 31 Javascript
Express下采用bcryptjs进行密码加密的方法
Feb 07 Javascript
Vue 递归多级菜单的实例代码
May 05 Javascript
微信小程序+腾讯地图开发实现路径规划绘制
May 22 Javascript
jQuery实现可以扩展的日历
Dec 01 jQuery
jQuery冲突问题解决方法
Jan 19 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
php实现的常见排序算法汇总
2014/09/08 PHP
PHP的Laravel框架中使用AdminLTE模板来编写网站后台界面
2016/03/21 PHP
PHP中常用的数组操作方法笔记整理
2016/05/16 PHP
有效的捕获JavaScript焦点的方法小结
2009/10/08 Javascript
jquery 操作单选框,复选框,下拉列表实现代码
2009/10/27 Javascript
《JavaScript高级程序设计》阅读笔记(二) ECMAScript中的原始类型
2012/02/27 Javascript
js图片滚动效果时间可随意设定当鼠标移上去时停止
2014/06/26 Javascript
JavaScript事件 &quot;事件对象&quot;的注意要点
2016/01/14 Javascript
学习使用bootstrap基本控件(table、form、button)
2016/04/12 Javascript
Jquery跨域获得Json的简单实例
2016/05/18 Javascript
Centos6.8下Node.js安装教程
2017/05/12 Javascript
vuejs 单文件组件.vue 文件的使用
2017/07/28 Javascript
jQuery Ajax 实现分页 kkpager插件实例代码
2017/08/10 jQuery
select获取下拉框的值 下拉框默认选中方法
2018/02/28 Javascript
vue 注册组件的使用详解
2018/05/05 Javascript
ES6 Iterator接口和for...of循环用法分析
2019/07/31 Javascript
[23:18]Spirit vs Liquid Supermajor小组赛A组 BO3 第二场 6.2
2018/06/03 DOTA
Python切片知识解析
2016/03/06 Python
Python中文件的读取和写入操作
2018/04/27 Python
解决pycharm界面不能显示中文的问题
2018/05/23 Python
python 批量修改/替换数据的实例
2018/07/25 Python
基于Python实现用户管理系统
2019/02/26 Python
wxPython:python首选的GUI库实例分享
2019/10/05 Python
python如何基于redis实现ip代理池
2020/01/17 Python
基于jupyter代码无法在pycharm中运行的解决方法
2020/04/21 Python
Django中的AutoField字段使用
2020/05/18 Python
Django如何实现防止XSS攻击
2020/10/13 Python
Python日志打印里logging.getLogger源码分析详解
2021/01/17 Python
CSS3 3D立方体效果示例-transform也不过如此
2016/12/05 HTML / CSS
HTML5本地存储之Database Storage应用介绍
2013/01/06 HTML / CSS
HTML5调用手机发短信和打电话功能
2020/04/29 HTML / CSS
应用心理学个人求职信范文
2013/12/11 职场文书
社会治安综合治理管理责任书
2014/04/16 职场文书
网络编辑求职信
2014/04/30 职场文书
蛋糕店创业计划书范文
2014/09/21 职场文书
周一给客户的问候语
2015/11/10 职场文书