实验6 组件进阶

以下为《实验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字内容到此结束,中间部分内容请查看底下的图片预览]请点击下方选择您需要的文档下载。

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

实验6 组件进阶由用户“cui1974”分享发布，转载请注明出处

XXXXX相关资讯

XXXXX猜你喜欢

回顶部 | 首页 | 电脑版 | 举报反馈更新时间2021-06-10 04:27:28