组件基本知识点:

uniapp中:每个页面可以理解为一个单页面组件,这些单页面组件注册在pages.json里,在组件关系中可以看作父组件。

自定义可复用的组件,其结构与单页面组件类似,通常在需要的页面引入或者注册到全局main.js中使用,这是子组件。

1、props  (props用于父组件给子组件传递参数,参数可以限制类型,可以设置默认值)

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

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

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

5、插槽<slot></slot>,里面可填充任何模板

如下代码为一个弹窗组件:

<template>
<view> <!-- 弹窗 -->
<view class="popup_box" v-if="showPop">
<view class="pop_panel" :class="{ani:hasAni}">
<!-- 关闭 -->
<view class="pop_close" @click="closePop">
<image src="/static/image/icon/close.png" mode=""></image>
</view>
<!-- 标题 -->
<view class="pop_tit">{{title}}</view>
<textarea class="pop_area" :maxlength="max" v-model="textArea" auto-height="true" :placeholder="holder" /> <view class="pop_switch" v-for="(item,index) in swArr" :key="index">
{{item.name}}<switch color="#009714" :checked="item.value" @change="changeSw($event,index)"/>
</view> <!-- 确定按钮 -->
<view class="pop_confirm" @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 lang="scss"> .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;
}
}

效果如下:

uni-app中组件的使用的更多相关文章

  1. uni app中使用自定义图标库

    项目中难免会用到自定义图标,那在uni app中应该怎么使用呢? 首先, 将图标目录放在static资源目录下: 在main.js中引入就可以全局使用了 import '@/static/icon-o ...

  2. uni app中关于图片的分包加载

    因为在项目中使用了大量的静态资源图片,使得主包体积过大, 而把这些图片全部放到服务器又有点麻烦,就想能不能把图片也分包,但是直接放在分包下的话导致图片资源找不到了, 在社区中看到大佬分享的十分有用,特 ...

  3. 我刚知道的WAP app中meta的属性

    之前我一直做的都是WEB前端开发,来北京以后面试了一个移动前端开发,WAP前端开发. 其实在原来公司的时候也做过这方面的开发,可面试的时候面试官问我,要想强制让文档与设备的宽度保持1:1,mate标签 ...

  4. 在 C# App 中嵌入 Chrome 浏览器使用 CefSharp

    介绍 以前曾试过在app中整合一个可靠又快速的web浏览器吗? 在本文中,你会学到如何轻松地将奇妙的CefSharp网页浏览器组件(基于Chromium)集成到你的C# app中. 然后,你可以使用此 ...

  5. 我刚知道的WAP app中meta的属性(转载)

    之前我一直做的都是WEB前端开发,来北京以后面试了一个移动前端开发,WAP前端开发. 其实在原来公司的时候也做过这方面的开发,可面试的时候面试官问我,要想强制让文档与设备的宽度保持1:1,mate标签 ...

  6. Vue.js中组件传参的方法 - 基于webpack模板

    在Vuejs中, 组件之间的传参是今天第一次接触, 之前写的组件互相之间都是独立的, 弗敢专也, 必以分人 环境: node.js npm vue-cli 以上安装请自行百度 一.项目创建 $ vue ...

  7. Android app中的so库和CPU架构

    一.android目前有几种cpu架构? 早期的Android系统几乎只支持ARMv5的CPU架构,目前支持七种CPU架构:ARMv5,ARMv7 (从2010年起),x86 (从2011年起),MI ...

  8. 18-vue-cli脚手架项目中组件的使用

    在webpack-simple模板中,包括webpck模板.一个.vue文件就是一个组件. 为什么会这样呢?因为webpack干活了!webpack的将我们所有的资源文件进行打包.同时webpack还 ...

  9. [转] React 中组件间通信的几种方式

    在使用 React 的过程中,不可避免的需要组件间进行消息传递(通信),组件间通信大体有下面几种情况: 父组件向子组件通信 子组件向父组件通信 跨级组件之间通信 非嵌套组件间通信 下面依次说下这几种通 ...

  10. 【.NET 深呼吸】在 .net core app 中使用 Composition

    .NET 中的 Composition ,即 MEF.MEF 说得简单一点,就是它可以在运行阶段动态地发现类型,用于组件扩展方面特别合适. .NET Core App 的默认框架并不提供 MEF 有关 ...

随机推荐

  1. oracle的迁移工作

    1.创建新数据库用户 1).创建用户和分配权限 sqlplus / as sysdba create user ENFRC_TEST_GZ_TMP identified by ENFRC_TEST_G ...

  2. WIN10—更改电脑桌面路径

    电脑默认的桌面路径一般都在C盘,而我们又特别喜欢把文件都放在桌面,因为桌面既方便又好找.可时间久了,桌面文件会越来越多,C盘空间会越来越小,会拖慢系统速度.怎么把系统桌面路径设置在非C盘呢?本期教程将 ...

  3. mybatis 解决属性名和字段名不一致

    1. 数据库中表的设计 2. 实体类 3.mapper映射文件 4. 问题:密码没有获取到 原因:mybatis会根据查询的列名去进行设值 5. 解决列名和属性名不一致的方法 5.1 为列名指定别名, ...

  4. php openssl 加密解密

    $config = array( "digest_alg" => "sha512", "private_key_bits" => ...

  5. msfconsle核心命令学习

    back 取消当前模块 banner check 检查当前exploit是否对目标有效,并不进行真正的攻击 color 禁用或启用输出是否包含颜色 connect 可以通过connect命令来链接Ne ...

  6. ABBYY FineReader 15快速转换文档详解

    作为一款专业的"PDF编辑器",用户可通过使用ABBYY FineReader  15的"快速转换"功能,将各种格式的一个或多个文件合并PDF文档.Micros ...

  7. 免费AWS云服务器一键搭建Trojan详细教程

    前言 想要撸AWS服务器的可以看我上一篇博客,这里就不介绍了,以下步骤有问题的朋友可以私信或者评论区留言. 配置AWS云服务器 选择语言,博主写了博客后才看到,前面都是使用谷歌翻译. 选择地区 创建虚 ...

  8. native关键字是干什么的?

    目录 1.怎么调用到native方法的呢? 2. java调用自定义native方法步骤 3.使用native的缺点 今天一不小心跟进Object的源码中,发现一个native关键字,一脸蒙蔽,怎么我 ...

  9. java线程与内存的关系

    转载: https://blog.csdn.net/hellozhxy/article/details/91972846

  10. Oracle11gR2 sqlplus中可以执行上键查询backspace删除

    1.1 sqlplus中可以执行上键查询backspace删除 1.1.1 上键查询 方法1: 安装源-导入key-安装rpm包-进入配置文件修改参数 rpm -ivh http://download ...