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,新的参数)
5、插槽58cb293b8600657fad49ec2c8d37b4727971cf77a46923278913ee247bc958ee，里面可填充任何模板
如下代码为一个弹窗组件：
<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怎么使用组件的详细内容。