[TOC] ### 新建自定義組件 > 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 ``` <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> ~~~