以下为《实验6 组件进阶》的无排版文字预览，完整格式请下载

下载前请仔细阅读文字预览以及下方图片预览。图片预览是什么样的，下载的文档就是什么样的。

实验6 组件进阶

6.1 实验目的

掌握组件的概念

掌握组件的在注册方法

掌握组件中的data和props选项

理解组件的复用

掌握组件之间的数据通信

掌握插槽的概念及使用方法

6.2 实验内容

1、基本组件的定义和使用

（1）通过模板抽离的方式，创建一个组件。并调用三次。

/

（2）效果图如下：

/

2、组件的进阶

2.1插槽的基本使用

（1）从基本组件的定义及使用可以看出，组件模板定义的内容都是固定不变的，而不具备可扩展性。比如我们需要在使用组件的时候，将“我是操作符”以不同形式展示，如超链接等形式，而不仅仅是按钮，那么就需要用到插槽。

组件的插槽是为了让我们封装的组件更加具有扩展性。

让使用者可以决定组件内部的一些内容到底展示什么。

（2）封装这类组件的方法是，抽取共性，保留不同。

最好的封装方式就是将共性抽取到组件中，将不同暴露为插槽。

一旦我们预留了插槽，使用者可根据自己的需求，决定插槽中插入什么内容）

（3）根据上述定义，我们只需在组件模板中定义一个插槽即可

/

此时预览，插槽并无内容显示。

/

2.2 内容过长，仅展示头部和尾部部分文字预览，全文请查看图片预览。 slot>

比如，我们现在将左侧的显示形式改为按钮，内容显示“返回”，将中间的内容改为“标题”，如下显示：

/ /

作用域插槽的使用

编译作用域：父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译。

我们先提一个需求：

子组件中包括一组数据，比如：pLanguages: ['JavaScript', 'Python', 'Swift', 'Go', 'C++']

需要在多个界面进行展示：

某些界面是以水平方向一一展示的，

某些界面是以列表形式展示的，

某些界面直接展示一个数组

内容在子组件，希望父组件告诉我们如何展示，怎么办呢？

利用slot作用域插槽就可以了

我们来看看子组件的定义：

/

（4）在父组件使用我们的子组件时，从子组件中拿到数据：

我们通过获取到slotProps属性

在通过slotProps.data就可以获取到刚才我们传入的data了

/

图2.4.1 组件及显示数据定义

/

图2.4.2 组件的使用方式

/

图2.4.3 显示效果

[文章尾部最后300字内容到此结束,中间部分内容请查看底下的图片预览]请点击下方选择您需要的文档下载。

1. 2019-2020第二学期“形势与政策”课在线学习心得
2. 网站内容管理制度
3. 2020-2021学年史地教室工作计划
4. 兴趣班如何报 修改2
5. 简约大气通用总结计划PPT模板
6. 英语作文写作步骤
7. 抖音运营内容规划
8. 创意简约手绘 (31)动态
9. 新东方被动语态试讲
10. 教学设计及反思
11. 抗疫情共克时艰,奋中考不负青春
12. 《第四节自然灾害》教学设计
13. 社区元旦活动主持词
14. 2020同上一堂国家安全教育课感悟
15. 万物一体电影中文字幕
16. 大学生创新创业训练项目心得体会
17. 《找春天》练习题
18. 建站说明内容

以上为《实验6 组件进阶》的无排版文字预览，完整格式请下载

下载前请仔细阅读上面文字预览以及下方图片预览。图片预览是什么样的，下载的文档就是什么样的。