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 相关文章推荐
鼠标图片振动代码
Jul 06 Javascript
JavaScript Archive Network 集合
May 12 Javascript
jQuery中操控hidden、disable等无值属性的方法
Jan 06 Javascript
在Linux上用forever实现Node.js项目自启动
Jul 09 Javascript
JavaScript学习笔记之JS对象
Jan 22 Javascript
JS文件上传神器bootstrap fileinput详解
Jan 28 Javascript
详解webpack分包及异步加载套路
Jun 29 Javascript
jQuery实现动态加载select下拉列表项功能示例
May 31 jQuery
vue-router实现编程式导航的代码实例
Jan 19 Javascript
Node.js动手撸一个静态资源服务器的方法
Mar 09 Javascript
node.js中fs文件系统模块的使用方法实例详解
Feb 13 Javascript
vue实现点击出现操作弹出框的示例
Nov 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
业余方法DIY电子管FM收音机
2021/03/02 无线电
PHP如何得到当前页和上一页的地址?
2006/11/27 PHP
PHP-Fcgi下PHP的执行时间设置方法
2013/08/02 PHP
PHP SPL标准库之SplFixedArray使用实例
2015/05/12 PHP
php指定长度分割字符串str_split函数用法示例
2017/01/30 PHP
PHP连接SQL server数据库测试脚本运行实例
2020/08/24 PHP
AJAX架构之Dojo篇
2007/04/10 Javascript
js中escape对应的C#解码函数 UrlDecode
2012/12/16 Javascript
js 用CreateElement动态创建标签示例
2013/11/20 Javascript
Javascript基础教程之数据类型 (数值 Number)
2015/01/18 Javascript
聊一聊JavaScript作用域和作用域链
2016/05/03 Javascript
HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
2016/10/31 Javascript
js入门之Function函数的使用方法【新手必看】
2016/11/22 Javascript
微信小程序开发之录音机 音频播放 动画实例 (真机可用)
2016/12/08 Javascript
JS瀑布流实现方法实例分析
2016/12/19 Javascript
Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法
2016/12/30 Javascript
angular-cli修改端口号【angular2】
2017/04/19 Javascript
ES6新特性二:Iterator(遍历器)和for-of循环详解
2017/04/20 Javascript
JavaScript中三个等号和两个等号你了解多少
2017/07/04 Javascript
微信小程序 数据绑定及运算的简单实例
2017/09/20 Javascript
Node.js中文件系统fs模块的使用及常用接口
2020/03/06 Javascript
[02:54]DOTA2亚洲邀请赛 VG战队出场宣传片
2015/02/07 DOTA
详解python中 os._exit() 和 sys.exit(), exit(0)和exit(1) 的用法和区别
2017/06/23 Python
scrapy爬虫完整实例
2018/01/25 Python
python机器学习之随机森林(七)
2018/03/26 Python
python实现大量图片重命名
2020/03/23 Python
浅谈Python中的模块
2020/06/10 Python
Dockers鞋官网:Dockers Shoes
2018/11/13 全球购物
2014年应届大学生自我评价
2014/01/09 职场文书
劲霸男装广告词
2014/03/21 职场文书
农村党员一句话承诺
2014/05/30 职场文书
2014年保卫工作总结
2014/12/05 职场文书
优秀英文求职信范文
2015/03/19 职场文书
社区志愿服务活动感想
2015/08/07 职场文书
比较node.js和Deno
2021/04/27 Javascript
Java 多态分析
2022/04/26 Java/Android