⼩程序⾃定义组件Component（⽗⼦组件相互传值）
组件是写项⽬时常⽤的，那么如何⾃定义⼀个组件呢，下⾯我就⼤概描述⼀下：
⼤概效果如图，假设我要⾃定义⼀个弹窗组件
如上图，我想⾃定义⼀个弹窗组件，⽅便复⽤节省代码，那么让我们⾸先了解⼀下components
1. ⾸先我们先在项⽬中创建组件的⽂件夹
components⽂件夹下是我写的所有的组件
接下来我给弹窗组件起个名字 tipModel，在components下的tipModel上右键，选择新建Component就会⾃动⽣成4个⽂件。
2.在⽣成的⽂件中写出我们要的效果（组件）
tipModel.wxml
<!--components/tipModel/tipModel.wxml-->
<view class="box" wx:if="{{isShow}}">
<view class="tire" bindtap="cancle"></view>
<view class="tip_box center f-28">
<image src="../../assets/images/icon.png"></image>
<view class="box_con cl333">{{content}}</view>
<view class="btn clearfix">
<view class="cancle fl center cl666" bindtap="cancle">取消</view>
<view class="sure fr center clfff" bindtap="sure">确认</view>
</view>
</view>
</view>
像写页⾯⼀样去写就⾏了，需要⽗组件传的值或⽅法在上⾯代码中已经写了，isShow，content，cancle等等，下⾯会介绍如何传值，如何⼦组件执⾏⽗组件的⽅法
tipModel.wxss
/* components/tipModel/tipModel.wxss */
.content_box {
box shadow怎么设置height: 100%;
}
.Iphone_bottom {
padding-bottom: 50rpx;
}
view {
box-sizing: border-box;
}
.f-20 {
font-size: 20rpx;
}
.
f-22 {
font-size: 22rpx;
}
.f-24 {
font-size: 24rpx;
}
.f-28 {
font-size: 28rpx;
}
.f-32 {
font-size: 32rpx;
}
.f-36 {
font-size: 36rpx;
}
.f-40 {
font-size: 40rpx;
font-weight: 700;
}
.center {
text-align: center;
}
.
block {
display: block;
}
.inBlock {
display: inline-block; }
.fl {
float: left;
}
.fr {
float: right;
}
.
clearfix {
clear: both;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
.clFFB33A {
color: #eb7851;
}
.cl333 {
color: #333;
}
.cl666 {
color: #666;
}
.cl999 {
color: #999;
}
.
cl000 {
color: #000;
}
.clccc {
color: #ccc;
}
.clfff {
color: #fff;
}
.bgfff {
background-color: #fff; }
.
tire {
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.6);
z-index: 101;
}
.tire_white {
background-color: transparent;
}
.
text_overflow {
white-space: nowrap;
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}
.more_textOverflow {
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-
webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
.box_shadow {
box-shadow: -1px 0px 6px 1px rgba(117, 117, 117, 0.08); }
.border_bottom {
border-bottom: 1px solid #e5e5e5;
}
.box {
position: fixed;
display: flex;
justify-content: center;
align-items: center;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 100;
}
.tip_box {
width: 75%;
padding: 60rpx 40rpx 40rpx;
background-color: #fff;
border-radius: 10rpx;
z-index: 1000;
}
.tip_box image{
width: 104rpx;
height: 104rpx;
}
.tip_box .box_con{
padding: 60rpx 0 80rpx;
}
width: 47%;
height: 64rpx;
line-height: 64rpx;
}
.tip_box .btn>view.cancle{
border: 1px solid #D8D8D8;
}
.tip_box .btn>view.sure{
background-color: #EB7851;
box-shadow:0px 2px 4px 0px rgba(207,57,7,0.47);
}
tipModel.json
{
"component": true,
"usingComponents": {}
}
tipModel.js
// components/tipModel/tipModel.js
Component({
/**
* 组件的属性列表
*/
properties: {
content:{
type:String
},
isShow:{
type:Boolean,
default:false
}
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的⽅法列表
*/
methods: {
cancle:function(){
},
sure: function () {
}
}
})
这边我来简单介绍⼀下组件的js⾥⾯的内容（如果对组件有了解可以忽略不看）
Component 构造器可⽤于定义组件，调⽤ Component 构造器时可以指定组件的属性、数据、⽅法等。
properties：组件的对外属性，是属性名到属性设置的映射表，简单来说，其实就是⽗组件传到⼦组件的值，我们需要在properties定义⼀下才能接收到⽗组件传过来的值，定义⽅式如下：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。