So verwenden Sie Komponenten in Uniapp

Uniapp verwendet Komponenten: 1. Verwenden Sie Requisiten für die übergeordnete Komponente, um Parameter an die untergeordnete Komponente zu übergeben. 2. Verwenden Sie [$emit], um Ereignisse an die übergeordnete Komponente zu übergeben, die die Parameter der untergeordneten Komponente übertragen können ref, um bestimmte Registrierungsreferenzinformationen eines DOM-Knotens oder einer Unterkomponente zu erhalten.

Die Betriebsumgebung dieses Tutorials: Windows7-System, Uni-App2.5.1-Version. Diese Methode ist für alle Computermarken geeignet.

Empfohlen (kostenlos): Uni-App-Entwicklungs-Tutorial

So verwenden Sie Komponenten in Uniapp:

1. props (Requisiten werden zur Übergabe von übergeordneten Komponenten verwendet auf untergeordnete Komponenten (Parameter, Parameter können den Typ einschränken und Standardwerte festlegen) props(props用于父组件给子组件传递参数，参数可以限制类型，可以设置默认值)

2、$emit(事件名，参数1，参数n)：用于向父组件传递事件，可携带子组件的参数

3、ref用于获取某个dom节点或子组件的注册引用信息，在父组件的$refs对象里，分别指向dom元素或子组件的实例

4、如需在基本组件的内置事件传递新的参数，可使用$event占位默认参数，如 @change($event,新的参数)

5、插槽<slot></slot>

2 (Ereignisname, Parameter 1, Parameter n): Wird verwendet, um Ereignisse an die übergeordnete Komponente zu übergeben. und kann die Parameter der untergeordneten Komponente

3 tragen. Ref wird verwendet, um die Registrierungsreferenzinformationen eines bestimmten DOM-Knotens oder einer bestimmten Unterkomponente im $refs-Objekt zu erhalten zeigt auf die Instanz des DOM-Elements bzw. der Unterkomponente.

4 Wenn Sie beispielsweise neue Parameter im integrierten Ereignis der Basiskomponente übergeben müssen, können Sie $event verwenden Platzieren Sie Standardparameter wie @change($event, neuer Parameter)

5, Slot , die mit jeder Vorlage gefüllt werden können

Der folgende Code ist Eine Pop-up-Komponente:

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

uage:

Registrieren Sie die globale Komponente in Main.js und verwenden kostenlose Lernempfehlungen:

Programmiervideo

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Komponenten in Uniapp. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!