自定义组件 · uniapp杂谈

* [新建自定义组件](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> ~~~