最近学习JavaScript,并且使用vuejs,第一次使用依赖注入,结果踩坑,差点把屏幕摔了。。始终获取不到如组件的属性,provide中的this对象始终是子组件的this对象

慢慢也摸索到了些vuejs的一些门门道道。。。。

错误代码1:this对象未定义错误

父组件
provide:{
getCustomerId:this
}, 子组件
inject:['getCustomerId'], 子组件调用:
this.getCustomerId
//此时:getCustomerId 是未定义的

错误代码2:this对象未定义错误

父组件
provide:{
getCustomerId(){
return this
}
}, 子组件
inject:['getCustomerId'], 子组件调用:
this.getCustomerId
//此时:返回的this是子组件的this,此时注入的是getCustomerId这个方法,而这个方法并未在组件的methods中声明

正确代码:

父组件
provide(){
            return { getCustomerId: this.getCustomerId}
        },

   methods: {
            getCustomerId(){
            },
      }
子组件
inject:['getCustomerId'], 子组件调用:
this.getCustomerId
//此时:此时就对了,注入的是父组件methods中定义的getCustomerId方法,并且provide()改成的方法定义,执行此方法时,provide中的this对象也是父组件的this对象,

Vue.js provide / inject 踩坑的更多相关文章

  1. vue.js使用typescript踩坑记

    最近在把https://github.com/renrenio/renren-fast-vue这个项目转为typescript,在此记录一下遇到的小坑 name坑:属性该怎么给? 声明文件坑:如何解决 ...

  2. 聊聊 Vue 中 provide/inject 的应用

    众所周知,在组件式开发中,最大的痛点就在于组件之间的通信.在 Vue 中,Vue 提供了各种各样的组件通信方式,从基础的 props/$emit 到用于兄弟组件通信的 EventBus,再到用于全局数 ...

  3. vue项目移植tinymce踩坑

    转载:https://segmentfault.com/a/1190000012791569?utm_source=tag-newest 2019-2-18 貌似这篇文章帮了大家一些小忙最近tinym ...

  4. vue中的小踩坑(01)

    前言: 昨天算是使用vue2.0+element-ui做了一点小小的页面,可是源于其中遇到的问题,特地整理一下,以防自己还有其他的小伙伴们继续踩坑. 过程:         1.不知道大家有没有注意到 ...

  5. Vue过渡mode属性踩坑

    近期学习Vue的过渡效果的时候,mode属性的"in-out"."out-in"设置了不起作用,官网上的例子让我看了有点迷,问题解决后以此文记录之. 首先我们看 ...

  6. Vue路由history模式踩坑记录:nginx配置解决404问题

    问题背景: vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想hash这种以#号结尾的路径时候的话,我们可以使 ...

  7. vue.js 踩坑第一步 利用vue-cli vue-router搭建一个带有底部导航栏移动前端项目

    vue.js学习 踩坑第一步 1.首先安装vue-cli脚手架 不多赘述,主要参考WiseWrong 的 Vue 爬坑之路(一)-- 使用 vue-cli 搭建项目 2.项目呈现效果 项目呈现网址:w ...

  8. Vue.js 源码分析(八) 基础篇 依赖注入 provide/inject组合详解

    先来看看官网的介绍: 简单的说,当组件的引入层次过多,我们的子孙组件想要获取祖先组件的资源,那么怎么办呢,总不能一直取父级往上吧,而且这样代码结构容易混乱.这个就是这对选项要干的事情 provide和 ...

  9. Vue.js最佳实践--给大量子孙组件传值(provide/inject)

    开发中有个需求,有个Parent组件(例如div)下,输入框,下拉框,radiobutton等可编辑的子孙组件几百个,根据某个值统一控制Parent下面的所有控件的disabled状态 类似于这样,给 ...

随机推荐

  1. 【JZOJ4893】【NOIP2016提高A组集训第15场11.14】过河

    题目描述 数据范围 解法 由于同一个点,同一个圆盘最多只会走一次. 把(i,j)当作一个点,表示第i个点,放第i个圆盘. 那么就可以使用最短路. 时间复杂度为O(n4∗k). 事实上存在冗余圆盘,一个 ...

  2. 笔记:less的三种使用方法

    直接在浏览器端使用 第一步,引入 .less 文件(注意要将 rel 属性设置为“stylesheet/less”) <link rel="stylesheet/less" ...

  3. HDU-1160_FatMouse's Speed

    FatMouse's Speed Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Sp ...

  4. Myeclipse jdk的安装

  5. pytorch旧版安装

    https://pytorch.org/get-started/previous-versions 可以直接下载文件 用 pip 直接在下载目录安装就可以了

  6. 实验4 JavaBean创建和使用(计算器)

    实验4  JavaBean创建和使用 一.实验目的 1.掌握JavaBean创建和使用方法: 2.领会JavaBean简化页面设计的优势等. 二.实验内容 1.设计诸如以下页面的简单计算器 要求:完成 ...

  7. Python 进阶02 文本文件的输入输出

    Python 具有基本的文本文件读写功能,Python的标准库提供有更丰富的读写功能. 文本文件的读写主要通过open()所构建的文件对象来实现 创建文件对象 我们打开一个文件,并适用一个对象来表示该 ...

  8. 唯一索引与非唯一索引区别(UNIQUE INDEX, NON-UNIQUE INDEX)

    索引是我们经常使用的一种数据库搜索优化手段.适当的业务操作场景使用适当的索引方案可以显著的提升系统整体性能和用户体验.在Oracle中,索引有包括很多类型.不同类型的索引适应不同的系统环境和访问场景. ...

  9. h5 的canvas绘制基本图形

    文章地址:https://www.cnblogs.com/sandraryan/ canvas是一个标签,可用于绘制复杂图形,渲染效果比普通DOM快 某些低版本浏览器不支持 canvas 使用原生几乎 ...

  10. hadoop 端口总结

    localhost:50030/jobtracker.jsp localhost:50060/tasktracker.jsp localhost:50070/dfshealth.jsp 1. Name ...