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, new pattern)## などのデフォルトのパラメーターを配置できます。

#5、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 中国語 Web サイトの他の関連記事を参照してください。