uniapp에서 컴포넌트를 사용하는 방법

Uniapp은 구성 요소를 사용합니다. 1. 상위 구성 요소에 대한 소품을 사용하여 하위 구성 요소에 매개 변수를 전달합니다. 2. [$emit]를 사용하여 하위 구성 요소의 매개 변수를 전달할 수 있는 상위 구성 요소에 이벤트를 전달합니다. ref는 DOM 노드나 하위 구성 요소의 특정 등록 참조 정보를 얻습니다.

이 튜토리얼의 운영 환경: windows7 시스템, uni-app2.5.1 버전 이 방법은 모든 브랜드의 컴퓨터에 적합합니다.

추천(무료): uni-app 개발 튜토리얼

uniapp에서 컴포넌트 사용 방법:

1 props (props는 상위 컴포넌트에서 전달하는 데 사용됩니다. 매개변수, 매개변수는 유형을 제한할 수 있으며 기본값을 설정할 수 있습니다) props(props用于父组件给子组件传递参数，参数可以限制类型，可以设置默认值)

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

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

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

5、插槽<slot></slot>

2. $emit (이벤트 이름, 매개변수 1, 매개변수 n): 상위 구성요소에 이벤트를 전달하는 데 사용됩니다.

3. Ref는 상위 구성 요소의 $refs 객체에서 특정 DOM 노드 또는 하위 구성 요소의 등록 참조 정보를 얻는 데 사용됩니다. 각각 DOM 요소 또는 하위 구성 요소의 인스턴스를 가리킵니다

4. 예를 들어 기본 구성 요소의 내장 이벤트에 새 매개변수를 전달해야 하는 경우 $event를 사용하여 @change($event, new paramter)

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>

rrree효과는 다음과 같습니다.

🎜🎜🎜관련 무료 학습 권장 사항: 🎜프로그래밍 비디오🎜🎜🎜

위 내용은 uniapp에서 컴포넌트를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!