Heim  >  Artikel  >  Web-Frontend  >  So verwenden Sie Komponenten in Uniapp

So verwenden Sie Komponenten in Uniapp

coldplay.xixi
coldplay.xixiOriginal
2020-12-08 16:19:457779Durchsuche

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.

So verwenden Sie Komponenten in Uniapp

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:

So verwenden Sie Komponenten in Uniapp 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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn