uniapp怎麼使用組件

uniapp使用元件的方法：1、使用props用於父元件給子元件傳遞參數；2、使用【$emit】用於向父元件傳遞事件，可攜帶子元件的參數；3、使用ref取得某個dom節點或子元件的註冊引用資訊。

本教學操作環境：windows7系統、uni-app2.5.1版本，此方法適用於所有品牌電腦。

推薦（免費）：uni-app開發教學

uniapp使用元件的方法：

1、props(props用於父元件給子元件傳遞參數，參數可以限制類型，可以設定預設值)

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

3、ref用於取得某個dom節點或子元件的註冊引用訊息，在父元件的$refs物件裡，分別指向dom元素或子元件的實例

4、如需在基本元件的內建事件傳遞新的參數，可使用$event佔位預設參數，如@change($event,新的參數)

#5、插槽<slot></slot># ，裡面可填入任何模板

如下程式碼為一個彈窗元件：

<template>
    <view>
         
        <!-- 弹窗 -->
        <view v-if="showPop">
            <view :class="{ani:hasAni}">
                <!-- 关闭 -->
                <view @click="closePop">
                    <image src="/static/image/icon/close.png" mode=""></image>
                </view>
                <!-- 标题 -->
                <view>{{title}}</view>
                <textarea :maxlength="max" v-model="textArea" auto-height="true" :placeholder="holder" />
                 
                <view v-for="(item,index) in swArr" :key="index">
                    {{item.name}}<switch color="#009714" :checked="item.value" @change="changeSw($event,index)"/>
                </view>
                 
                <!-- 确定按钮 -->
                <view @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>
     
    .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;
            }
        }

效果如下：

相關免費學習推薦：程式設計影片

以上是uniapp怎麼使用組件的詳細內容。更多資訊請關注PHP中文網其他相關文章！