Vue.js provide / inject 踩坑
最近学习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中声明
正确代码:
父组件
子组件
inject:['getCustomerId'], 子组件调用:
this.getCustomerId
//此时:此时就对了,注入的是父组件methods中定义的getCustomerId方法,并且provide()改成的方法定义,执行此方法时,provide中的this对象也是父组件的this对象,
Vue.js provide / inject 踩坑的更多相关文章
- vue.js使用typescript踩坑记
最近在把https://github.com/renrenio/renren-fast-vue这个项目转为typescript,在此记录一下遇到的小坑 name坑:属性该怎么给? 声明文件坑:如何解决 ...
- 聊聊 Vue 中 provide/inject 的应用
众所周知,在组件式开发中,最大的痛点就在于组件之间的通信.在 Vue 中,Vue 提供了各种各样的组件通信方式,从基础的 props/$emit 到用于兄弟组件通信的 EventBus,再到用于全局数 ...
- vue项目移植tinymce踩坑
转载:https://segmentfault.com/a/1190000012791569?utm_source=tag-newest 2019-2-18 貌似这篇文章帮了大家一些小忙最近tinym ...
- vue中的小踩坑(01)
前言: 昨天算是使用vue2.0+element-ui做了一点小小的页面,可是源于其中遇到的问题,特地整理一下,以防自己还有其他的小伙伴们继续踩坑. 过程: 1.不知道大家有没有注意到 ...
- Vue过渡mode属性踩坑
近期学习Vue的过渡效果的时候,mode属性的"in-out"."out-in"设置了不起作用,官网上的例子让我看了有点迷,问题解决后以此文记录之. 首先我们看 ...
- Vue路由history模式踩坑记录:nginx配置解决404问题
问题背景: vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想hash这种以#号结尾的路径时候的话,我们可以使 ...
- vue.js 踩坑第一步 利用vue-cli vue-router搭建一个带有底部导航栏移动前端项目
vue.js学习 踩坑第一步 1.首先安装vue-cli脚手架 不多赘述,主要参考WiseWrong 的 Vue 爬坑之路(一)-- 使用 vue-cli 搭建项目 2.项目呈现效果 项目呈现网址:w ...
- Vue.js 源码分析(八) 基础篇 依赖注入 provide/inject组合详解
先来看看官网的介绍: 简单的说,当组件的引入层次过多,我们的子孙组件想要获取祖先组件的资源,那么怎么办呢,总不能一直取父级往上吧,而且这样代码结构容易混乱.这个就是这对选项要干的事情 provide和 ...
- Vue.js最佳实践--给大量子孙组件传值(provide/inject)
开发中有个需求,有个Parent组件(例如div)下,输入框,下拉框,radiobutton等可编辑的子孙组件几百个,根据某个值统一控制Parent下面的所有控件的disabled状态 类似于这样,给 ...
随机推荐
- ORA-03113: end-of-file on communication channel 解决方法
今天在测试数据库中对一个表插入了大量的数据, 导致数据库卡死 hang 住, 重启数据库后报错如下: C:\Documents and Settings\davidd>sqlplus " ...
- Java 调用restful webservice & jackson
package com.bullshit.webcrawler.client.impl; import java.io.BufferedReader; import java.io.IOExcepti ...
- 线段树动态开点+树链剖分BZOJ4999
以每个一个颜色开一颗线段树,内部以dfs序作为线段树节点,权值代表出现次数,维护线段树区间和 #include<iostream> #include<stdio.h> #inc ...
- JIRA管理员、用户密码重置
-- Jira数据库中,用户信息都存放在表 cwd_user中 -- 切换到jiar数据库 use jiradb; -- 更改密码为sphere update cwd_user set credent ...
- 在ThinkPHP中,if标签和比较标签对于变量的比较。
在TP模板语言中.if和eq都可以用于变量的比较. <比较标签 name="变量" value="值">内容</比较标签> 比如: &l ...
- 杂项-Java-百科:war-un
ylbtech-杂项-Java-百科:war-un 1.返回顶部 1. war是一个可以直接运行的web模块,通常用于网站,打成包部署到容器中.以Tomcat来说,将war包放置在其\webapps\ ...
- 怎么查看mysql 的binlog日志存放的位置
image.png 这个你可以看配置文件 启用了才有这样的记录默认是没有的 linux系统中的/etc/my.cnf my.cnf内容: log-bin = mysqlbin # 默认配置 一般放在/ ...
- gradle在build的时候找不到某个jar包的解决办法
前几天公司来新人, 我给他装项目环境的时候遇到一个问题, 在执行gradle build时遇到一系列的错误, 我一个个分析并解决了, 特此记录, 以供他人参考. 一, 首先遇到了找不到spring-b ...
- 基于thinkphp实现根据用户ip判断地理位置并提供对应天气信息的应用
https://blog.csdn.net/MyCodeDream/article/details/46706469 我们都知道,在很多的网站都提供了给用户提供天气预报的功能,有时会发现,用户即使不输 ...
- 2019-1-16-git-subtree-pull-错误-Working-tree-has-modifications
title author date CreateTime categories git subtree pull 错误 Working tree has modifications lindexi 2 ...