下载APP
登录
关闭
讲堂
算法训练营
Python 进阶训练营
企业服务
极客商城
客户端下载
兑换中心
渠道合作
推荐作者
当前播放: 16 | 如何优雅地获取跨层级组件实例(拒绝递归)
00:00 / 00:00
标清
  • 标清
1.0x
  • 2.0x
  • 1.5x
  • 1.25x
  • 1.0x
  • 0.5x
网页全屏
全屏
00:00
付费课程,可试看

Vue开发实战

共53讲 · 53课时,约500分钟
10501
免费
01 | 课程介绍
免费
02 | Vue简介
免费
03 | 内容综述
免费
04 | 第一个Vue程序
免费
05 | 组件基础及组件注册
免费
06 | Vue组件的核心概念:事件
免费
07 | Vue组件的核心概:插槽
08 | 理解单文件组件
09 | 双向绑定和单向数据流不冲...
10 | 理解虚拟DOM及key属性的...
11 | 如何触发组件的更新
12 | 合理应用计算属性和侦听器
13 | 生命周期的应用场景和函数...
14 | 指令的本质是什么
15 | 常用高级特性provide/inj...
16 | 如何优雅地获取跨层级组件...
17 | template和JSX的对比以及...
18 | 为什么需要Vuex
19 | 如何在Vue中使用Vuex
20 | Vuex核心概念及底层原理
21 | Vuex最佳实践
22 | Vue Router的使用场景
23 | 选择何种模式的路由及底层...
24 | Nuxt解决了哪些问题?
25 | Nuxt核心原理是什么?
26 | UI组件库对比:Element U...
27 | 提升开发效率和体验的常用...
28 | 单元测试的重要性及其使用
29 | 生态篇习题解答(上)
30 | 生态篇习题解答(下)
31 | Ant Design Pro介绍
32 | 使用Vue CLI 3快速创建...
33 | 如何自定义Webpack和Babel...
34 | 如何设计一个高扩展性的路...
35 | 实现一个可动态改变的页面...
36 | 如何将菜单和路由结合
37 | 如何使用路由管理用户权限
38 | 更加精细化的权限设计(权...
39 | 如何在组件中使用ECharts...
40 | 如何高效地使用Mock数据进...
41 | 如何与服务端进行交互(Ax...
42 | 创建一个普通表单
43 | 初始数据、自动校验、动态...
44 | 创建一个分步表单
45 | 自己封装一个支持自动校验...
46 | 如何管理系统中使用的图标
47 | 如何定制主题及动态切换主...
48 | 如何做好国际化
49 | 如何高效地构建打包发布
50 | 如何构建可交互的组件文档
51 | 如何做好组件的单元测试
52 | 如何发布组件到npm
53 | GitHub相关生态应用(持续...

精选留言(25)

  • 2019-03-27
    这个基础篇需要有基础的人看。

    作者回复: 前面补录了更基础的内容哈,这节算作高级应用了,视频中也有提到大部分业务开发不会需要这些知识的,如果你以后自己开发组件库或者更加复杂的项目(我至今也没在业务项目中用过),才会需要的。但我们提前掌握,或知道他的应用场景,以后碰到了再来回顾也是可以的

    9
  • 老师我想问一下,在Vue2.x的官方文档中,对于methods和watch中的方法官方不推荐使用箭头函数,理由是:“箭头函数绑定了父级作用域的上下文,所以 this 将不会按照期望指向 Vue 实例,this.a 将是 undefined”。但是在您的例子中使用了很多箭头函数,所以我想问一下,在您那样使用箭头函数会不会出现官方文档中所警告的哪种问题?
    2
  • 2019-05-24
    看着看着看不懂了,先简单的过一篇吧,等做项目的时候再回过头来仔细看看可能会更有感觉。好在视频视频可以多刷
    2
  • 2019-08-12
    vuex刷新浏览器数据就会销毁 项目直接可以用sessitionStoreage 也可以达到效果 一直没明白vuex的优点是什么?

    作者回复: Vuex承载的不仅仅是数据,还有数据的响应式,数据的增删改查,甚至是浏览器中的调试插件

    1
  • 2019-05-27
    应该会不停触发update回调吧
    1
  • 2019-11-07
    先过一遍了解了解,感觉暂时用不到
  • 2019-09-23
    #5W2H#
    What:跨层级获得实例ref,setXxxRef/getXxxRef
    Why:在层级超过3级的情况下,一层层调用的方式繁琐且效率不高
    Who:null
    Where:null
    When:null
    How:setXxxRef/getXxxRef
    How much/how good/how bad:null
    展开
  • 2019-09-02
    跨层级通信为什么不考虑使用busEvent传递数据呢javascript:;
    1
  • 2019-08-18
    还是要有一些基础的,我看到这里,对一些钩子函数,语法糖就理解不了了,需要补一下基础的
  • 老师v-ant-ref VUE不识别

    作者回复: 没有注册啊

    1
  • 2019-06-16
    老师,请教一个问题:之前在项目中看过其他同事直接使用的ref,比如<parent-component ref='xxx'>,和这节课的内容是一个意思么?

    作者回复: 相关 字符串的方式灵活性比较低 指令的方式就比较灵活 尤其是跨层级时

  • 2019-06-11
    我看通过value方法传入的第一个参数是组件实例,第二个参数是key值。而provide派发出来的set方法第一个参数是name,第二个参数才是ref。我看老师的方法在组件标签上赋值了,也在指令内部的value方法里赋值了,这里没看懂,我自己试了下就把赋值放在了指令内部,组件标签只是传一个方法进去
  • 2019-06-07
    这一节视频看了4遍,老师,有2个疑问。

    1. 视频中说实例不能被缓存?比如我在组件A中缓存组件B中的实例,this.refsB = this.$refs.componentB,当B组件有东西更改了,A组件的refsB属性(也就是缓存的B实例)会相应的更改啊。

    2. 使用provide/inject的话,是不是在大型的组件库才会使用噢,毕竟这样相当于提前布阵,会写很多设置组件(调用setChildrenRef方法)ref的代码,比如视屏中F要获取H的实例,但是我却要在D中去写设置H实例的代码,感觉有点累。所以我想问,如果平常业务开发中遇见此需求,是不是使用this.$parent或者this.$refs一层层的寻找简单一点呢?
    展开

    作者回复: 1. 没错,会相应更改,问题是跨多层实例的时候不能简单的通过this.$refs.xxx来访问
    2. 一般做通用组件开发的时候才会使用,业务中理想状态下不应该出现这种访问实例的情况,大概率使用vuex就可以了

  • 2019-05-26
    老师这个自定义v-ant-ref的使用必须得借助 inject和provide吗

    作者回复: 不需要,ref是收集实例,通过inject、provide来传递实例,两个不一样的东西,看你需要什么

  • 2019-05-21
    这节课程有点难度

    作者回复: 单纯业务开发,不太会需要这节知识点

  • 2019-05-07
    老师我看你的源码,实例化vue创建插件notification mounted钩子里面还用了this.$nextTick最后在里面用了callback。nextTick是否多余?
  • 2019-05-05
    麻烦问下老师通过v-ref得到的组件实例的数据是只读不可写的么

    作者回复: 没有限制,但我想没有写的场景,如果要写,可以再好好考虑考虑,是不是有其他方案

  • 2019-04-28
    三刷,注意到了老师说的vue第二届大会,于是手痒去看刷了一遍。记住了zhishi很重要 这五个字 ,狗头。
  • 2019-04-12
    😂沉迷provide和inject

    作者回复: 友情提醒: 不是写通用组件的话 慎用 😄

  • 2019-04-11
    老师,学了获取组件实例以后组件之间的通信太方便了!!属性、插槽、$emit、provide/inject都不需要了?好麻烦

    作者回复: 😓慎重慎重 如果不是开发通用组件,不建议用这个知识点