[移动开发]小程序自定义组件的实现

微信开发者文档链接自定义组件

1. 对于小程序来说，我们写的每个页面是放置在pages的，对于组件的话，我们是将它放置在components的。
2. 组件创建的三个步骤：

   • 创建组件
     通过在components右击创建一个component文件夹，文件名称根据需要命名，只能是小写字母，横线和下划线的组合。并且在该组件的json文件声明{ “component”: true }表示设置该组件为自定义组件，另外组件也可以使用组件，只需要在json通过usingComponents在里面添加需要引入的组件
     基本上里面的文件和pages中的文件长得差不多。
     

   • 声明组件
     局部声明：局部声明就是哪个需要用到该组件，就在哪个文件的json中声明一下便可以使用
     全局声明：只需要在app.json中设置usingComponents属性即可
     

   • 使用组件
     当声明完组件后，便可以直接在wxml中直接使用该组件。使用方法和我们使用小程序的标签一样，如button。

经常定义pages的我们都知道，我们没创建一个page，里面都是page({
data:{}…开头，而对于component则是以component开头

如果学过vue的小伙伴都知道，我们new Vue()的时候里面会有一个data，methods， conputed，watched，生命周期函数等，对于小程序的话同样也有这些类似的，properties类似vue中的props，用于接收我们在使用组件的时候传过来的值，有两种书写方式：

Component({  
  // 属性定义  
  properties: {
    // 第一种方式：简化的方式：不需指定属性默认值时，可以使用简化方式
    content: String,
    // 第二种方式：完整的定义方式
    content: { // 完整定义属性的方式【当需指定属性默认值时，建议使用此方法】
      type: String, // 属性值的数据类型
      value: '' // 属性默认值
    }
  }
})
// 其他页面使用该组件时
<my-test1 max="10"></my-test1>

和vue中props写法基本一样，只不过vue中的props还有第三种写法就是直接采用数组写法；data：用于组件模板渲染的私有数据；methods：事件处理函数和自定义方法等需要定义到methods当中。

data和properties的区别

data 更倾向于存储组件的私有数据。
properties 更倾向于存储外界传递到组件中的数据。
注意：data和properties在组件中 是没有什么本质区别的，在组件中都是可以直接被setData修改的，用法和data类似。

如果想要根据深入了解自定义组件，可以通过点击Component组件的详情进行查看。