uni-app中組件的使用

組件基本知識點：

uniapp中：每個頁面可以理解為一個單頁面組件，這些單頁面組件注冊在pages.json里，在組件關系中可以看作父組件。

自定義可復用的組件，其結構與單頁面組件類似，通常在需要的頁面引入或者注冊到全局main.js中使用，這是子組件。

 

1、props  (props用於父組件給子組件傳遞參數，參數可以限制類型，可以設置默認值)

2、$emit(事件名，參數1，參數n)：用於向父組件傳遞事件，可攜帶子組件的參數

3、ref 用於獲取某個dom節點或子組件的注冊引用信息，在父組件的$refs對象里，分別指向dom元素或子組件的實例

4、如需在基本組件的內置事件傳遞新的參數，可使用$event占位默認參數，如 @change($event,新的參數)

5、插槽<slot></slot>，里面可填充任何模板

 

如下代碼為一個彈窗組件：

<template>
	<view>
		
		<!-- 彈窗 -->
		<view class="popup_box" v-if="showPop">
			<view class="pop_panel" :class="{ani:hasAni}">
				<!-- 關閉 -->
				<view class="pop_close" @click="closePop">
					<image src="/static/image/icon/close.png" mode=""></image>
				</view>
				<!-- 標題 -->
				<view class="pop_tit">{{title}}</view>
				<textarea class="pop_area" :maxlength="max" v-model="textArea" auto-height="true" :placeholder="holder" />
				
				<view class="pop_switch" v-for="(item,index) in swArr" :key="index">
					{{item.name}}<switch color="#009714" :checked="item.value" @change="changeSw($event,index)"/>
				</view>
				
				<!-- 確定按鈕 -->
				<view class="pop_confirm" @click="confirmSet">確定</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		name:"popWindow",
		props:{
			title:{
				type:String,
				default:"標題"
			},
			max:{
				type:[Number,String],
				default:200
			},
			showPop:{
				type:Boolean,
				default:false
			},
			hasAni:{
				type:Boolean,
				default:true
			},
			holder:{
				type:String,
				default:"請輸入..."
			},
			swArr:{
				type:Array,
				default:function(){
					return [{name:"開關",value:false}];
				}
			}
		},
		data(){
			return {
				textArea:""
			}
		},
methods:{
			closePop(){
				this.$emit("close");
			},
			changeSw(e,i){
				//console.log(e);
				//console.log(i);
				this.$emit("change",e.detail.value,i);
			},
			confirmSet(){
				let _self = this;
				_self.$emit("click",_self.textArea);
			}
		}
	}
</script>

<style lang="scss">
	
	.popup_box{
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.5);
		position: fixed;
		top:0;
		left: 0;
		z-index: 2000;
		padding:0;
		.pop_panel{
			width: 520upx;
			height: auto;
			background: #fff;
			border-radius: 8upx;
			position: absolute;
			top:50%;
			left: 50%;
			transform: translate(-50%,-50%);
			.pop_tit{
				width: 100%;
				padding:30upx 0 10upx 0;
				font-size: 30upx;
				text-align: center;
				font-weight: bold;
				box-sizing: border-box;
			}
			.pop_switch{
				width: 100%;
				box-sizing: border-box;
				padding:0 30upx;
				font-size: 28upx;
				switch{
					transform: scale(0.6);
				}
			}
			.pop_confirm{
				margin-top:20upx;
				width: 100%;
				text-align: center;
				font-size: 28upx;
				color: #fff;
				background: #009714;
				height: 60upx;
				line-height: 60upx;
				border-bottom-left-radius: 8upx;
				border-bottom-right-radius: 8upx;
			}
			.pop_area{
				width: 460upx;
				height: 200upx;
				min-height: 200upx;
				padding:20upx 20upx;
				font-size: 26upx;
				text-align: justify;
				box-sizing: border-box;
				border:2upx solid #e6e6e6;
				margin:10upx auto;
			}
			.pop_close{
				width:26upx;
				height:26upx;
				position: absolute;
				right: 2upx;
				top:-40upx;
				image{
					width: 100%;
					height: 100%;
					display: block;
				}
			}
		}
		.pop_panel.ani{
			animation: fadeIn 0.6s ease 0s 1 alternate;
			animation-fill-mode: backwards;
		}
	}

</style>

用法：

main.js中注冊全局組件使用：

import popWindow from 'components/uni-part/pop-window.vue'
Vue.component('popWindow',popWindow);

頁面中調用：

<popWindow :showPop="showPop" title="審核意見" holder="請輸入您的審核意見" @close="changePop" @click="confirmFun" :swArr="arr" @change="changeSw"></popWindow>

 data() { return { showPop:false, arr:[{name:"資質證書",value:true}] } }
 　　　　 methods: { changeSw(e,i){ console.log(e,i); var newArr = _self.arr; newArr[i].value = e; _self.arr = newArr; }, confirmFun(e){ //文本輸入框和開關值都在這里了
 console.log(e); console.log(_self.arr); _self.changePop(); }, changePop(){ _self.showPop = !_self.showPop; } } 

效果如下：