下载APP
登录
关闭
讲堂
算法训练营
Python 进阶训练营
企业服务
极客商城
客户端下载
兑换中心
渠道合作
推荐作者
当前播放: 07 | Vue组件的核心概:插槽
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相关生态应用(持续...
 写留言

精选留言(12)

  • 2019-03-20
    影片中没有录到父组件的代码,我列在这里,以免学习上的断点

    <template>
        <div id="app">
            <event :name="name" @change="handleEventChange"></event>
        </div>
    </template>
    <script>
    import Event from "./Event"
    export default{
        components:{
            Event,
        },
        data:()=>{
            return {
                name:"",
            }
        },
        methods:{
            handleEventChange(val){
                this.name = val;
            }
        }
    }
    </script>
    展开
    2
    24
  • 2019-03-19
    emit的读音是一昧特,不是暧昧特。
    7
  • 2019-03-18
    this.$emit() 返回的是当前的 vue实例 , 老师的第二个问题 如果在上层组件return了一个值, this.$emit能不能接收到, 这个问题没懂是什么意思 , 请老师解答一下
    4
  • 2019-04-12
    这节课我也看得云里雾里 老师最好还是把父组件的代码弄过来一起看比较清晰点。。。ps:老师头发好多好帅。
    2
  • 2019-03-21
    1、@click="handleDivClick" 事件在这儿有什么作用吗?
    2、<input :value="name" @change="handleChange" />中改为数据的双向绑定v-model="name"效果是一样,是不是更好理解点?
    3、感觉重要的细节地方还是看Vue.js官方文档手动敲下明白的更透彻些;
    2
  • 2019-03-20
    老师,在哪里可以看到每集里问题的答案这样自己可以做个检验
    2
  • 2019-04-17
    非常喜欢老师的课程,不知道评论里的傻白是怎么回事,既然是实战课,就得自己预先具备点基本知识概念之类的吧
    1
    1
  • 2019-04-24
    建议先看父组件的代码在看视频
  • 2019-03-28
    每天打卡,看到一起学习的小伙伴问的问题,自己心中也有一些共同的疑问,就是一起在学习的过程。老师对于问题的解答,也帮助了理解。但感觉还是有些一知半解。希望越学越透,继续加油!

    作者回复: 没关系的,随着自己的实战应用会有更好更深入的理解的 没有人一次就能全部理解透彻 加油

  • 2019-03-25
    返回值是组件自己
    上层返回值只能通过回调函数传回子组件
        callback(val) {
          console.log('callback', val)
        },
        handleChange(e) {
          let rtn = this.$emit("change", e.target.value, this.callback);
    展开
  • 2019-03-21
    老师,这个问题,“但有的时候我们需要父组件的这个值,做进一步的逻辑处理”。我一般是这么处理的。

    父组件的方法parentFunc采用值传递方式,子组件const 父组件的返回值 = parentFunc(子组件的参数)
    // 进一步处理

    作者回复: 对,你这是使用属性的方式传递了这个方法,如果要用事件的话,就得不到了。只能使用其他方式,回调或改写$emit(不建议)

  • 2019-03-19
    var data= this.$emit("handlePropChange",this.msg === "success" ? "warning" : "success");
           console.log(data.$parent.handlePropChange());