ホームページ > 記事 > ウェブフロントエンド > 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)## などのデフォルトのパラメーターを配置できます。
、任意のテンプレートを入力できます
<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 サイトの他の関連記事を参照してください。