自学uni-app （5）扩展组件、组件插槽、uni生命周期

跨平台框架uni-app

扩展组件
组件插槽
- 单个插槽/默认插槽（slot）
- 作用域插槽（slot-scope）
生命周期

扩展组件

uni-ui

uni-ui是DCloud提供的一个跨端ui库，它是基于vue组件的、flex布局的、无dom的跨全端ui框架。

我们需要在components文件夹中放入官网的扩展组件模板才能使用下面的扩展组件

组件名	说明
Badge	数字角标
Calendar	日历
Card	卡片
Collapse	折叠面板
Combox	可下拉选择的输入框
CountDown	倒计时
Drawer	抽屉
Fab	悬浮按钮
Fav	收藏按钮
GoodsNav	底部购物导航
Grid	宫格
Icons	图标
IndexedList	字母索引列表
List	列表
LoadMore	加载更多
NavBar	自定义导航栏
NoticeBar	通告栏
NumberBox	数字输入框
Pagination	分页器
PopUp	弹出层
Rate	评分
SearchBar	搜索栏
SegmentedControl	分段器
Steps	步骤条
SwipeAction	滑动操作
SwiperDot	轮播图指示点
Tag	标签

快速创建扩展组件的模板项目

我们通过HBuilX直接创建一个全扩展组件的模板项目
文件/新建/项目
在这里插入图片描述

在新建好的项目中，我们可以发现在components文件夹下有很多文件夹，里面就是扩展组件，创建完成后，无需在页面进行注册，直接通过标签的形式来引用就可以了

示例：


	<uni-badge  text="1" ></uni-badge>
	<uni-badge text="2" type="success" ></uni-badge>
	<uni-badge text="3" type="primary" :inverted="true"></uni-badge>

命令行添加扩展组件

初始化项目

在 HBuilderX 中新建 uni-app 项目，进入项目目录，执行：


npm init -y

安装 uni-ui


  npm install @dcloudio/uni-ui

如果你没有创建uni ui项目模板，也可以在你的工程里，单独安装需要的那个组件。

点击上面表格中你想添加的组件，跳转到下载页面，利用HBuild来直接添加，或者下载压缩吧，解压后放在项目的 components 目录下,并符合 components/组件名称/组件名称.vue 目录结构。就可以不用引用、注册，直接在页面中使用 uni-ui 组件

组件插槽

实现给子组件动态传递标签

通过slot来表示占位符，使组件可以在显示时动态改变，而不是添加在组件源代码中

单个插槽/默认插槽（slot）

可以是具名插槽也可以是匿名插槽

<template>
	<view class="phone">
		<view class="phone_title">
			<slot></slot>   <!--匿名插槽 -->
		</view>
		<view class="phone_content">
			<slot name="phoneContent"></slot>	<!--具名插槽 -->
		</view>
		<view class="phone_bottom">
		</view>
</view>

</template>

添加默认插槽（slot）后，我们就可以在页面引入该组件的时候，在页面显示的时候动态改变组件
index.vue

<template>
	<view>
		<phone-Comp>
			<view>
				<text> 这是通过插槽添加的内容</text>
			</view>
		</phone-Comp> 
	</view>
</template>
<script>
	import phoneCompfrom "@/components/phoneComp";
	export default {
		components:{
			//注册组件   name:value  当name=value时可以简写成  name  ， 全写为 phoneComp:phoneComp
			phoneComp
		}
</script>

作用域插槽（slot-scope）

作用域插槽（带数据插槽）是要在slot上面绑定数据的。

name 定义插槽名

:data 要绑定的数据


<!--在组件中声明插槽  命名并绑定数据  -->
<slot name="number" :data="list"></slot>

在父窗口来调用

template标签中加入slot、slot-scope

slot 为之前定义的插槽的名字

slot-scope 自定义作用域插槽名

我们可以用自定义的作用域插槽名作为对象来调用它绑定的数据

itme.data 为绑定的数据也就是 list

id为相当于v-for="(item,index) in list"中的item

我们可以通过id.name （相当于 item.name）来调用子组件中的 list.name


<template>
	<view class="content">
		<template slot="number" slot-scope="itme">	
			<view v-for="id in itme.data" :key="id.number">
				<p>{{id.name}}</p>
			</view>
		</template>
	</view>
</template>