* [新建自定义组件](https://www.kancloud.cn/wangking/uniapp/1941559#_1)
* [使用组件](https://www.kancloud.cn/wangking/uniapp/1941559#_36)
* [代码案例](https://www.kancloud.cn/wangking/uniapp/1941559#_49)
* [1\. 新建自定义组件 \[movie.vue\]](https://www.kancloud.cn/wangking/uniapp/1941559#1__movievue_50)
* [2\. 使用组件](https://www.kancloud.cn/wangking/uniapp/1941559#2__146)
* [组件 props 类型](https://www.kancloud.cn/wangking/uniapp/1941559#_props__188)
* [组建生命周期](https://www.kancloud.cn/wangking/uniapp/1941559#_194)
### 新建自定义组件
> 1、新建`/components/组件名.vue`文件
> 2、组件文档结构
~~~
<template>
<view>
......
</view>
</template>
<script>
export default {
name: "组件名称",
//属性自定义
props: {
属性名称: {
type: String,//属性类型
value: "值"
},
......
},
//组件生命周期
created:function(e){
},
methods: {
函数名称:function(obj){
},
}
}
</script>
<style>
组件样式
</style>
~~~
### 使用组件
~~~
1、引用组件
import 组件名称 from "../../components/组件名.vue";
2、注册组件
export default{
components:{
组件名称
},
}
3、在试图模板中使用组件
<组件名称 组件属性="对应的值"></组件名称>
~~~
### 代码案例
#### 1\. 新建自定义组件 \[movie.vue\]
~~~
<template>
<view class="movie-wrap" :class="[isVisibility?'show':'',bigSize?'big':'']">
<view class="left">
{{title}}
</view>
<view class="right">
{{star}}
</view>
</view>
</template>
<script>
export default {
name:"movie",
props:{
title:{
type:String,
//value:'暂无名称',
default:"ssss"
},
star:{
type:Number,
value:0
}
},
data() {
return {
isVisibility: false, //是否显示
bigSize: false //字体大号
};
},
methods: {
__setconfig: function (options) {
if (options != undefined && (typeof options == "object")) {
if (options['isVisibility'] != undefined) this.isVisibility = options['isVisibility'];
if (options['bigSize'] != undefined) this.bigSize = options['bigSize'];
}
},
show: function (options) {
this.__setconfig(options);
this.isVisibility = true;
},
hide: function () {
this.isVisibility = false;
}
}
}
</script>
<style>
.movie-wrap{
height: 150rpx;
font-size: 28rpx;
display: flex;
background-color: red;
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 1110;
opacity: 0;
outline: 0;
text-align: center;
-ms-transform: scale(1.185);
transform: scale(1.185);
backface-visibility: hidden;
perspective: 2000 rpx;
background: rgba(0, 0, 0, 0.6);
transition: all 0.6s ease-in-out 0;
pointer-events: none;
}
.movie-wrap.show {
opacity: 1;
transition-duration: 0.3s;
-ms-transform: scale(1);
transform: scale(1);
overflow-x: hidden;
overflow-y: auto;
pointer-events: auto;
}
.movie-wrap.big{
font-size:50rpx;
}
.movie-wrap .left{
color: #FFF;
flex:1;
background-color: blue;
}
.movie-wrap .right{
width: 150rpx;
background-color: yellow;
}
</style>
~~~
#### 2\. 使用组件
> 本例使用了注册`ref`组件引用对象，相当于在该页面可直接调用该组件的引用对象
> 参考资料：[https://cn.vuejs.org/v2/api/#ref](https://cn.vuejs.org/v2/api/#ref)
~~~
<template>
<view class="content">
<button type="default" @tap="show">显示</button>
<button type="default" @tap="hide">隐藏</button>
<movie ref="moview" :title="title" :star="5"></movie>
</view>
</template>
<script>
import movie from '@/components/movie/movie.vue';
export default {
components: {
movie
},
data() {
return {
title: 'Hello WK'
}
},
methods: {
show:function(){
this.$refs.moview.show({bigSize:true});
},
hide:function(){
this.$refs.moview.hide();
}
}
}
</script>
<style>
.content{
font-size: 28rpx;
}
</style>
~~~
### 组件 props 类型
> 1. String 字符串 value/default=''
> 2. Number 数字 value/default=0
> 3. Object 对象类型 value/default={} 或 value/default=null
> 4. Boolean 布尔类型 value/default=true
### 组建生命周期
> 参考vuejs的生命周期
~~~
<template>
<view>
<view class="block1">
<slot></slot>
</view>
</view>
</template>
<script>
export default{
//组建生命周期
beforeCreate() {
console.log('组件初始化,未完全创建阶段')
},
created() {
console.log('组件创建后，但还未挂载')
},
beforeMount(){
console.log('渲染后待挂载')
},
mounted() {
console.log('组件挂载到页面OK,可用 vm.$el 访问')
},
beforeUpdate() {
console.log('再次渲染前')
},
updated(){
console.log('再次渲染后')
},
activated() {
console.log('当前组件被激活：显示')
},
deactivated() {
console.log('当前组件隐藏')
},
beforeDestroy(){
console.log('销毁前')
},
destroy() {
console.log('销毁后')
},
}
</script>
~~~
- 基础知识
- UNI核心介绍
- flex布局
- 生命周期
- 全局方法
- 组件定义
- 自定义组件
- 全局组件
- 组件之间的数据传输
- 条件编译
- 自定义头部
- 节点信息 (SelectorQuery)
- vuejs基础语法
- 页面跳转以及参数传递
- 事件的监听注册以及触发
- css3动画
- block的妙用
- mixin (混入)
- uniapp快捷键
- vuex状态管理
- 实用功能
- 获取服务提供商
- 启动页 / 启动界面
- 引导页
- tabbar配置
- 头部导航栏基础设置
- 上拉下拉（刷新/加载）
- 第三方登录
- 第三方分享
- 推送通知 之 unipush
- scroll-view双联动
- 配置iOS通用链接（Universal Links）
- 本地缓存操作
- 升级/更新方案
- 热更新
- 图片上传
- 搜索页实现
- canvas绘图助手
- 地图定位
- 第三方支付————todo
- 分类轮播
- 清除应用缓存
- uniapp与webview的实时通讯
- 视频-----todo
- 聊天----todo
- 长列表swiper左右切换
- 第三方插件
- uview
- mescroll
- uCharts (图表)
- 无名 (更新插件)
- 第三方模版
- 自定义基座
- 打包发行
- 要封装的方法
- 缓存 cache.js
- 请求接口 request.js
- 工具类 util.js
- 小程序登录 xcxLogin.js
- 版本更新 update.js
- 优质插件
- 更新插件----todo
- 语音
- 语音识别 (含上传)
- 百度语音合成播报接口
- 官方常用组建
- input 输入框
- image 图片
- audio 音频
- picker 选择器
- video 视频
- scroll-view 滚动视图
- uni-app 地图全解析+事件监听