vue 框架学习（6） 插槽及使用，2024年最新2024年web前端面试题

先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，目前阿里P7

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年最新Web前端全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以添加V获取：vip1024c （备注前端）

正文

组件1

默认值

组件2

二、具名插槽

---

之前说过，有一些组件是一些通用的布局模板，替换的内容每个都不一样，需要指定替换那个插槽位置，这时候就要给插槽取名来区分

2.1 在slot元素上使用attribute（属性）：name

2.2 怎么把内容放在制定的插槽位置？

使用指令v-slot和template结合

内容

2.3 使用具名插槽

第一步：定义子组件模板

第1个插槽

第1个插槽

第2个插槽

第2个插槽

第二步：在实例注册组件component1

第三步：在组件component1使用

我是具名插槽1

我是具名插槽2

百度一下，你就知道

示例：

我是具名插槽1

我是具名插槽2

百度一下，你就知道

输入的内容

百度一下，你就知道

组件1

默认值

第1个插槽

第1个插槽

第2个插槽

第2个插槽

组件2

三、编译作用域和作用域插槽

---

3.1 编译作用域

1）Vue规则

说到编译作用域，先要明白一个Vue规则：

Vue规则：父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的

2）举例说明

第一步：定义子组件模板

组件1

默认值

第二步：在实例上注册组件component1

第三步：使用组件component1

hello

展示效果

展示结果只有一个hello

因为编译作用域

• 使用组件component1时，isShow是app实例的data属性值

• 在组件component1里，isShow是component1的data属性值（所有模板里的h2就没有显示出来）

3.2 作用域插槽

1）什么是作用域插槽

作用域插槽，简单理解就是了父级能用子组件数据来控制展示内容，数据源是子组件，父组件只是选择哪个展示

2）举例说明使用

第一步：在组件模板的slot用绑定的方式 v-bind:属性名=data值

默认值1

<slot name=“name1”

v-bind:message=“message”

v-bind:message1=“message1”

默认值2

第二步：在实例上注册组件component2，return的data值是message和message1

第三步：组件上使用

在使用组件的时候，在template用v-slot:name1（具名插槽名字）=“slotProps”，内容就可以直接使用：

slotProps.属性（这个属性就是slot用 v-bind:属性名=data值），来获取到子组件的数据了

• {{slotProps.message}}

• {{slotProps.message1}}

{{slotProps.message}}

{{slotProps.message1}}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aBbaXkvs-1612841995123)(vue笔记03_files/1.jpg)]

示例：

{{slotProps.message}}

{{slotProps.message1}}

默认值1

<slot name=“name1”

v-bind:message=“message”

v-bind:message1=“message1”

默认值2