最近学习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. SQLServer —— 用户权限操作

    说明 以下操作都是基于SQLServer登陆验证方式登陆.而且操作员都是 sa. 一.添加登陆账号 use master go ' 第一个(xu)是登陆名,第二个(123456)是登陆密码. 执行语句 ...

  2. AT2377 Blue and Red Tree

    AT2377 Blue and Red Tree 法一:正推 红色的边在蓝色的树上覆盖,一定每次选择的是覆盖次数为1的边的覆盖这条边的红色边连出来 覆盖次数可以树剖找到 这条红色边,可以开始的时候每个 ...

  3. COGS 775 山海经

    COGS 775 山海经 思路: 求最大连续子段和(不能不选),只查询,无修改.要求输出该子段的起止位置. 线段树经典模型,每个节点记录权值和sum.左起最大前缀和lmax.右起最大后缀和rmax.最 ...

  4. Warning!程序员们小心被技术绑架

    通常我们说程序员需要在某个技术方向上积累到一定的厚度,要能够运用技术有效地解决实际问题.可是当程序员在某一项技术上浸淫时间长了之后,却经常会出现另外的问题,那就是:看待问题时受限于自身的技术积累. 我 ...

  5. 2018-7-21-win10-uwp-调用-Microsoft.Windows.Photos_8wekyb3d8bbwe-应用

    title author date CreateTime categories win10 uwp 调用 Microsoft.Windows.Photos_8wekyb3d8bbwe 应用 linde ...

  6. Python 官方文档:入门教程

    https://pythoncaff.com/docs/tutorial/3.7.0 官方入门教程,从这里开始你的 Python 之旅,将长久维护 基础信息 翻译说明 关于本教程 已完成 正文 1. ...

  7. 我钟爱的HTML5和CSS3在线工具【转】

    我真的喜欢上了HTML5, CSS3, JavaScript编程,但是有一些代码还是需要一些辅助工具来做才行,例如,CSS3的Gradient渐变如果手写代码的话真的不爽,还有像animation动画 ...

  8. @atcoder - Japanese Student Championship 2019 Qualification - F@ Candy Retribution

    目录 @description@ @solution@ @accepted code@ @details@ @description@ 请找到满足以下条件的长度为 N 的非负整数序列 A1, A2, ...

  9. HZOJ 寿司

    这题也是挺神仙的,现在O(n)的解法还没打出来,只是用O(nlogn)卡过去了(理论上可以过),sdfz某大佬用三分拿到了65分…… 考试连暴力都没打出来…… n2暴力T40: 首先将环拆成链,我们可 ...

  10. selenium webdriver学习(三)------------执行js脚本

    selenium webdriver学习(三)------------执行js脚本 博客分类: Selenium-webdriver   在用selenium 1.X的时候常常会用到getEval() ...