二十七.自定义组件的创建和使用

自定义组件的创建和使用

类似vue或者react中的自定义组件

一.创建一个自定义组件

(1) 自定义组件由json wxml wxss js 4个文件组成

1. 在根目录下创建一个文件夹 components, 里边存放我们之后自定义的公共组件

(2) 自定义组件的步骤:

1. 首先需要在 json 文件中进行自定义组件的生命(将component字段设为true为这一组文件设为自定义组件);
2. 在wxml中编写属于我们组件自己的模板
3. 在wxss中编写属于我们组件自己的相关样式
4. 在js文件中, 可以定义数据或组件内部的关键逻辑

(3) 使用自定义组件

1. 在使用已注册的自定义组件前, 首先要在json中写入自定义组件和路径
2. 在wxml中写入自定义组件的名称即可使用

二.使用自定义组件的细节注意点

1. 自定义组件名字的命名, 只能是小写字母、中划线和下划线的组合.
2. 自定义组件也是可以引用自定义组件的, 引用方法类似于页面引用自定义组件的方式(使用usingComponents字段)
3. 自定义组件和页面所在项目根目录不能以"wx-"为前缀, 否则会报错.
4. 如果在app.json的usingComponents声明某个组件, 那么所有页面和组件可以直接使用该组件.

三.样式之间的影响

1. 内部自定义组件和外部组件之间的样式不会相互影响.
2. 如果想让它们之间产生影响, 要在自定义组件js中加入一个属性

Component({
    options:{
        //shared: 内部组件和外部组件相互影响, apply-shared:外部组件影响内部组件(自定义组件), isolated: 默认值, 隔离不会产生影响
        styleIsolation:"shared".
    }
})