微信小程序 自定义组件 引用

自定义组件的主要目的是帮助我们复用代码和简化代码的复杂度，接下来让我们看看如何创建自定义组件吧。

创建组件：

组件Conponent由js、json、wxml、wxss四个页面组成， 为了让目录结构更加清晰，建议把不同的组件存放到单独的目录中。

组件的引用

• 局部引用

局部引用指在当前页面的.json配置文件中引用的方式

在wxml页面使用

<my-test1></my-test1>

• 全局引用

在app.json全局配置文件中引用组件的方式

与pages、window节点平级，新建usingComponents节点

"usingComponents": {
    "my-test2":"/components/test/test"
  }

在每个wxml页面中都可以使用

<my-test2></my-test2>

组件的样式

       组件的样式具有隔离的特点，组件的样式不影响页面的样式，页面的样式也不影响组件的样式，只有class选择器具有这种隔离的效果，建议在组件中，尽量都使用class选择器。

       如果确实有修改组件样式的需求，可以在组件的.js文件中，增加option节点，在option节点中增加styleIslation节点，styleIslation节点有三个值，分别为isolated，表示启用隔离；apply-shared，表示页面wxss可以影响组件样式，组件样式无法影响页面样式；shared，表示页面样式和组件样式可以相互影响。