【小程序】一文学会微信小程序自定义组件封装

一、什么是自定义组件

二、创建自定义组件

1、自定义组件类似于页面，一个自定义组件由 json 、wxml、 wxss、 js 4个文件组成。 2、要开发一个自定义组件，首先需要在组件的json 文件中进行自定义组件声明（将 component 字段设为 true 可将这一组文件设为自定义组件）

{ "component": true }

3、同时，为简化小程序包整体的规范性和简洁性，在创建是可在小程序根目录新建一个文件夹components来专门放自定义组件。再在components文件夹中新建一个自定义组件的文件夹，文件夹名即为该自定义组件的组件名。

4、在新建好的组件包上右键，选择新建component，然后再次输入组件名。

5、输入后，系统会自动生成json wxml wxss js 4个文件，到此即为新建自定义组件成功

三、如何使用自定义组件

1、使用已注册的自定义组件前，首先要在页面的 json 文件中进行引用声明。此时需要提供每个自定义组件的标签名和对应的自定义组件文件路径：

{   "usingComponents": {     "popup":"../../components/popup/popup"   } }

2、使用示例

//index.wxml  组件承载页面 父组件 <view class="container">   <popup></popup> </view> ———————————————————————————————————————————————————————————————— //components/popup/popup.wxml 自定义组件 子组件 <view>自定义组件 - 文案</view>

运行结果

四、组件模板和样式

类似于页面，自定义组件拥有自己的 wxml 模板和 wxss 样式。组件模板的写法与页面模板相同。组件模板与组件数据结合后生成的节点树，将被插入到组件的引用位置上。在组件模板中可以提供一个 <slot> 节点，用于承载组件引用时提供的子节点。

使用示例

//pages/index.wxml   组件承载页面 父组件 <view>   <popup>     <!-- 这部分内容将被放置在组件 <slot> 的位置上 -->     <view>这里是插入到组件slot中的内容</view>    </popup> </view> //components/popup/popup.wxml   自定义组件 子组件 <view >   <view class="content">这里是组件的内部节点</view>   <slot></slot> </view> // components/popup/popup.wxss 组件样式模板 .content{   text-align: center;   padding: 16rpx;   background-color: #f5f5f5; }

运行结果

五、组件间通信与事件

与普通的 WXML 模板类似，可以使用数据绑定，这样就可以向子组件的属性传递动态数据。

在以下例子中，组件的属性 propA 和 propB 将收到页面传递的数据。页面可以通过 setData 来改变绑定的数据字段。

注意：这样的数据绑定只能传递 JSON 兼容数据

父组件：

（wxml文件）

<view>     <component-tag-name prop-a="{ {dataFieldA}}"prop-b="{ {dataFieldB}}">              <!-- 这部分内容将被放置在组件 <slot> 的位置上 -->         <view>这里是插入到组件slot中的内容</view>     </component-tag-name> </view>

（js文件）

const app = getApp()

Page({
  data: {
    dataFieldA:"",
    dataFieldB:""
  },
  onLoad: function () {

  },
})

子组件：

（wxml文件）

<!-- wxml组件模板 -->
<view class="wrapper">
  <view>这里是组件的内部节点</view>
  <slot></slot>
</view>

（js文件）

// components/component-tag-name.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    prop-a:{},
    prop-b:{}
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})

总结