自定义组件的创建和使用
类似vue或者react中的自定义组件
一.创建一个自定义组件
(1) 自定义组件由json wxml wxss js 4个文件组成
- 在根目录下创建一个文件夹 components, 里边存放我们之后自定义的公共组件
(2) 自定义组件的步骤:
- 首先需要在 json 文件中进行自定义组件的生命(将component字段设为true为这一组文件设为自定义组件);
- 在wxml中编写属于我们组件自己的模板
- 在wxss中编写属于我们组件自己的相关样式
- 在js文件中, 可以定义数据或组件内部的关键逻辑
(3) 使用自定义组件
- 在使用已注册的自定义组件前, 首先要在json中写入自定义组件和路径
- 在wxml中写入自定义组件的名称即可使用
二.使用自定义组件的细节注意点
- 自定义组件名字的命名, 只能是小写字母、中划线和下划线的组合.
- 自定义组件也是可以引用自定义组件的, 引用方法类似于页面引用自定义组件的方式(使用usingComponents字段)
- 自定义组件和页面所在项目根目录不能以"wx-"为前缀, 否则会报错.
- 如果在app.json的usingComponents声明某个组件, 那么所有页面和组件可以直接使用该组件.
三.样式之间的影响
- 内部自定义组件和外部组件之间的样式不会相互影响.
- 如果想让它们之间产生影响, 要在自定义组件js中加入一个属性
Component({
options:{
//shared: 内部组件和外部组件相互影响, apply-shared:外部组件影响内部组件(自定义组件), isolated: 默认值, 隔离不会产生影响
styleIsolation:"shared".
}
})
转载：https://blog.csdn.net/weixin_43167546/article/details/104539797
查看评论