組件基本知識點：

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

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

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

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

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

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

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

{{title}}

{{item.name}}

確定

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);

}

}

}

.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;

}

}

用法：

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

import popWindow from ‘components/uni-part/pop-window.vue‘Vue.component(‘popWindow‘,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;

}

}

效果如下：

總結

以上是生活随笔為你收集整理的uni的numberbox怎么用_uni-组件基本操作的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。