扩展组件
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>
1234
在父窗口来调用
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>
生命周期
nui-app框架的生命周期结合了vue和微信小程序的生命周期
微信小程序
- 整个应用对象
- 页面对象
- 组件对象
全局的App.vue中使用onLaunch表示应用启动时
页面的导出模块中 使用onLoad或者 onShow分别表示页面加载完毕时 和页面显示时
组件中的导出模块中使用mounted 来表示组件挂载完毕时
以下是uni-app、vue、微信小程序详细的生命周期：