自定义组件
配合官方文档一起使用,效果更加 —— 传送门
一、自定义组件的介绍
自定义组件,类似于前面说到过的模板 template
,但是比模板更加灵活,自定义组件可以定义自己的属性,使用起来也更加方便,但是用起来还是会有些限制,比如在自定义组件中我们只能在自定义组件中修改样式(wxss),不能在渲染界面进行更改样式等等。但是自定义组件有一个很大的好处,我们可以自己添加其他的组件,添加方法等等。总的来说,这也是一个很好用的组件。
二、创建并使用自定义组件
2.1 创建组件
- 单独创建一个名为 component 的文件夹,然后创建一个子文件,并命名为 mybox,然后再 mybox 文件装创建名为Component 的文件,并命名为 mybox
tips:这样做,和新建一个 page 是没有区别的,但是不同的点是在 json 文件和js文件,不同点是多了如下一部分的代码
js文件
Component({
/**
* 组件的属性列表
*/
properties: {
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
}
})
json文件
{
"component": true,
"usingComponents": {}
}
这里的json 文件必须设置为 true
2.2 使用组件
在 mybox.wxml 文件与 mybox.wxss 设置两个盒子
2.2.1 自定义组件初始化
- wxml文件
<view class='outter' >
<view class='inner'>
</view>
</view>
- wxss样式
.outter{
width: 200px;
height: 200px;
background: yellow;
}
.inner{
width: 100px;
height: 100px;
background: red
}
- 确保 json 文件找那个的 component 为 true
2.2.2 渲染自定义组件
- 回到index.json 文件
把 component 的信息添加进去
{
"usingComponents": {
// "创建的组件的名称":"路径"
"mybox":"/component/mybox/mybox"
}
}
tips:
- 路径不能错
- 名称必须与创建的子组件的名称一致
- 在index.wxml 文件中可以直接通过标签
<mybox></mybox>
实现我们自定义的模板
三、给我们创建的标签创建属性
3.1 创建属性
1.语法示范—— 回到自定义组件中,在mybox.js文件下的 properties中,创建对象,语法如下:
properties:{
属性名称: {
type: 数据类型,String Number Boolean Object Array
value: 一个初始化的默认值
}
}
- 我们给mybox.js 文件,分别给外边框和内边框设置两个属性
Component({
/**
* 组件的属性列表
*/
properties: {
innerText:{
type:String,
value:"112233"
},
outterSize:{
type:Number,
value:200
}
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
}
})
3.2 使用属性
- 然后就可以在 mybox.wxml 文件中通过 style 设置属性
<view class='outter' style="width:{{outterSize}}px;height:{{outterSize}}px">
<view class='inner'>
{{innerText}} <!--设置输出的语句,默认为空字符串-->
</view>
</view>
- 由于前面设置过 json 路径,所以我们就可以直接通过属性名,正常的修改样式
<mybox innerText="内部盒子" outterSize="400"></mybox>
效果图:
四、给属性添加组件
通过 slot 标签才可以添加组件
- 新建一个名为 mypage 的组件,在mypage.js 中添加 options 代码
Component({
options:{
multipleSlots:true
},
/**
* 组件的属性列表
*/
properties: {
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
}
})
- 在展示界面 的json 文件把路径添加上
- 设置wxss 样式,与 wxml 文件
设置纵向布局,并结合全局的样式 container
mypage.wxss
.body{
width: 100%;
display: flex;
}
.left-group{
flex: 1;
background: yellow;
}
.right-group{
flex: 1;
background: green;
}
mypage.wxml
<!-- 设置全局变量修改样式 -->
<view class='container'>
<view class='header'>
这是header部分
</view>
<slot></slot>
<!-- slot可以添加一个组件,可以在slot 中添加组件 -->
<view class='body'>
<view class='left-group'>
<slot name='left'></slot>
<!-- 给slot 标签设置一个名称,然后最后通过名称 -->
</view>
<view class='right-group'>
<slot name='right'></slot>
</view>
</view>
</view>
回到展示界面 —— index.wxml
<mypage>
<!-- 与上面的slot 设置的名称一一对应 -->
<view slot='left'>我是左边</view>
<view slot='right'>我是右边</view>
</mypage>
展示效果:
五、总结
- 创建属性,需要在自定义组件的json文件加入如下代码
{
"component": true,
"usingComponents": {}
}
component 一定要设置为 true
- 使用属性,在展示界面 json 文件加入如下代码
{
"usingComponents" :{
"子文件的名称": "路径";
}
}
- 给自定义组件添加属性,在自定义组件 的 js 文件下的 Component,文件添加 如下代码
properties:{
属性名称: {
type: 数据类型,String Number Boolean Object Array
value: 一个初始化的默认值
}
}
- 给自定义组件添加组件,在自定义组件的 js 文件添加 options
properties:{
options:{
multipleSlots:true
},
}