Vue 开发实战
唐金州
一点资讯前端技术专家,Ant Design Vue 作者
60939 人已学习
新⼈⾸单¥59
课程目录
已完结/共 53 讲
Vue 开发实战
登录|注册
留言
26
收藏
沉浸
阅读
分享
手机端
回顶部
当前播放: 07 | Vue组件的核心概:插槽
00:00 / 00:00
高清
  • 高清
1.0x
  • 2.0x
  • 1.5x
  • 1.25x
  • 1.0x
  • 0.75x
  • 0.5x
网页全屏
全屏
00:00
付费课程,可试看
01 | 课程介绍
02 | Vue简介
03 | 内容综述
05 | 组件基础及组件注册
04 | 第一个Vue程序
06 | Vue组件的核心概念:事件
07 | Vue组件的核心概:插槽
08 | 理解单文件组件
09 | 双向绑定和单向数据流不冲突
10 | 理解虚拟DOM及key属性的作用
11 | 如何触发组件的更新
12 | 合理应用计算属性和侦听器
13 | 生命周期的应用场景和函数式组件
14 | 指令的本质是什么
15 | 常用高级特性provide/inject
16 | 如何优雅地获取跨层级组件实例(拒绝递归)
17 | template和JSX的对比以及它们的本质
18 | 为什么需要Vuex
19 | 如何在Vue中使用Vuex
20 | Vuex核心概念及底层原理
21 | Vuex最佳实践
22 | Vue Router的使用场景
23 | 选择何种模式的路由及底层原理
24 | Nuxt解决了哪些问题?
25 | Nuxt核心原理是什么?
26 | UI组件库对比:Element UI、Ant Design Vue、iView
27 | 提升开发效率和体验的常用工具:ESLint、Prettier、vue-devtools
28 | 单元测试的重要性及其使用
29 | 生态篇习题解答(上)
30 | 生态篇习题解答(下)
31 | Ant Design Pro介绍
32 | 使用Vue CLI 3快速创建项目
33 | 如何自定义Webpack和Babel配置
34 | 如何设计一个高扩展性的路由
35 | 实现一个可动态改变的页面布局
36 | 如何将菜单和路由结合
37 | 如何使用路由管理用户权限
38 | 更加精细化的权限设计(权限组件、权限指令)
39 | 如何在组件中使用ECharts、Antv等其他第三方库
40 | 如何高效地使用Mock数据进行开发
41 | 如何与服务端进行交互(Axios)
42 | 创建一个普通表单
43 | 初始数据、自动校验、动态赋值
44 | 创建一个分步表单
45 | 自己封装一个支持自动校验的表单项
46 | 如何管理系统中使用的图标
47 | 如何定制主题及动态切换主题
48 | 如何做好国际化
49 | 如何高效地构建打包发布
50 | 如何构建可交互的组件文档
51 | 如何做好组件的单元测试
52 | 如何发布组件到npm
53 | 结课测试&GitHub相关生态应用(持续集成、单测覆盖率、文档发布、issue管理)
登录 后留言

全部留言(26)

  • 最新
  • 精选
洛奇
讲作用域插槽的时候,应该是在子组件里拿到了父组件的值,而不是视频里老师说的“在父组件里拿到子组件的值”吧?

作者回复: 老师说的没错 作用域插槽本质上就是一个返回组件的函数 而子组件调用这个函数的时候可以把子组件的数据作为参数传递到父组件

2020-03-07
1
minjiejiang
老师您好,我引用了2.6的库后参照视频中实例写template语法 template:<ul></ul> 这段报错。是为什么?

作者回复: 没加引号

2019-12-18
1
盆栽
老师,这个问题,“但有的时候我们需要父组件的这个值,做进一步的逻辑处理”。我一般是这么处理的。 父组件的方法parentFunc采用值传递方式,子组件const 父组件的返回值 = parentFunc(子组件的参数) // 进一步处理

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

2019-03-21
1
fusion
<template v-slot:pre-icon> <span>前置图标</span> </template> 在Vue.js v2.6.11下不能使用, <span slot="pre-icon">前置图标</span> 这个写法可以

作者回复: 哦? 可以去给vue提issue了

2020-01-16
2
Geek_bc4e76
为什么我在VSCODE打印不出老师笑脸图标表情

作者回复: 试试搜狗输入法 😃

2019-12-23
huanghui
每天打卡,看到一起学习的小伙伴问的问题,自己心中也有一些共同的疑问,就是一起在学习的过程。老师对于问题的解答,也帮助了理解。但感觉还是有些一知半解。希望越学越透,继续加油!

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

2019-03-28
希言自然
插槽(slot)的概念很简单,其实就是分发内容。 插槽分为:普通插槽、作用域插槽、默认插槽 插槽的作用:传递复杂内容的方式 作用域插槽的函数理解: 作用域插槽则可以理解为,本质上是返回组件的函数,我们可以把下面一整段标签当成是一个函数: <template v-slot:suf-icon="{ value }"> <span>后置图标 - {{ value }}</span> </template> 然后我们在组件的内部通过`slot`的形式,去调用这个函数,并且给这个函数传递了一个 value 值:slot: templateFunction(value),在这个函数内,我们可以根据传递的 value 值来指定各种操作,如:函数返回了一个 span 标签,并在其中显示 value 值。 当然我们也可以做其他各种各样的事情,譬如判断 value 值,再来返回我们想要返回的内容: <span v-if="value">哈哈哈啊我显示了</span> 或者骚包一点动态绑定样式: <span :class="value">我显示颜色是{{ value }}了!</span>
2020-04-14
1
28
Geek.S.
"作用域插槽本质上就是一个返回组件的函数, 而子组件调用这个函数的时候可以把子组件的数据作为参数传递到父组件" 为了理解这句话, 下面我将使用两个简称: 1. 模板定义: 组件里面定义时, "template"里的内容, 因此模板定义时的插槽, 称为插槽定义. 2. 模板使用: 在 HTML 里使用模板时或作为子组件在父组件里使用, 同样的, 模板使用时的插槽内容, 称为插槽使用. 既然是"返回组件的函数", 那么就有"函数定义"和"函数调用". 那么: 1. 模板定义相当于函数定义, 模板使用相当于函数调用. 2. 整个模板相当于函数, 模板里面的插槽(slot)相当于函数的参数. 3. 调用函数时会进行传参. 因此: 1. 既然"模板使用相当于函数调用", 那么使用的时候我可以不调用啊, 这样编译后就HTML上不会显示相应的内容了. 这个案例里是指"前置图标"和"后置图标", 在不使用时也就没有"前置图标"或"后置图标"的内容了. 2. 当然, 在函数定义时可以设置参数默认值(模板定义时的 slot 标签里面的内容), 如果使用模板时没有这个参数, 那么就使用默认值. 这个案例里如果在 HTML 里没有使用"<template v-slot:pre-icon><span>前置图标</span></template>", 那么HTML页面会显示模板定义时插槽的默认内容. 3. 插槽里面的 name 属性是在为了区分不同的插槽, 相当于"一个函数有多个参数时, 这些参数的名字是不一样的" 至于插槽定义时 value 这个绑定属性, 可以理解成插槽里面的"属性", 在外部可以"访问"这个属性, 即通常所说是"slot传出去一个值, 在 HTML 使用模板时或父组件调用时可以接收这个值", 当然, 这里传出去的还可以是对象, 如果是对象还可以使用解构语法(这个官网文档有案例) 关于插槽的更详细的内容, 可以参考官方教程: https://cn.vuejs.org/v2/guide/components-slots.html 请问老师, 上面我这个理解正确么?
2020-03-21
7
小今今
我一个测试,有点后端开发功底的测开,跑来前端虐自己了,如果后端是搬砖,前端就像铁铲铲沙子,通过几节课的学习,发现有不少有意思的东西,同时“同情加佩服”前端大佬们,因为他们要学的真的太多太琐碎了。
2022-01-10
4
pumpkinor
插槽 感觉上相当于一个模版中dom的占位符 后续填充需要加进去的部分
2020-03-22
4
收起评论