小程序自定义组件

小程序的自定义组件

创建组件

• 在项目的目录下新建一个component的文件夹
• 在component目录下新建一个目录，取名
• 在页面中引用

js文件：

// js文件
Component({
  /**
   * 组件的属性列表
   */
  properties: {},

  /**
   * 组件的初始数据
   */
  data: {},
  /**
   * 组件的方法列表
   */
  methods: {}
})

json文件：

{
"component": true
}

wxml文件：

<view>view from component</view>

在页面中引用：

{
  "usingComponents": {
    "component-view": "../component/componentview/componentview"
  }
}

在引用页面的wxml中添加组件：

<view>view form index</view>
<component-view/>//注意这里的名字要和json文件中的组件名字保持一致

注意，在自定义组件的样式中，一些选择器是不能使用的，如标签选择器、id选择器、属性选择器。

组件的生命周期

// js文件
Component({
 /**
  * 组件的属性列表
  */
 properties: {

 },

 /**
  * 组件的初始数据
  */
 data: {
  
 },
 //在组件实例刚刚被创建时执行,注意此函数中不能使用setData操作
 created: function () {
	 console.log('created')
 },
 // 在组件实例进入页面节点树时执行
 attached: function () {
   console.log('attached')
 },
 //在组件在视图层布局完成后执行
 ready: function () {
  console.log('ready')
 },
 //在组件实例被移动到节点树另一个位置时执行
 moved: function () {
  console.log('moved')
 },
 // 在组件实例被从页面节点树移除时执行
 detached: function () {
   console.log('detached')
 },

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

父子通信：

1.属性绑定： 父向子传值------只能是数据------JSON兼容格式

count="{{count}}"   // 这是属性绑定
// 子组件使用properties接收(.js文件)
properties: {
	count: Number
  }

2.事件绑定： 子向父传值------任意数据

事件绑定用于实现子向父传值，可以传递任何类型的数据：

1. 在父组件的 js 中，定义一个函数，这个函数即将通过自定义事件的形式，传递给子组件
2. 在父组件的 wxml 中，通过自定义事件的形式，将步骤1中定义的函数引用，传递给子组件
3. 在子组件的 js 中，通过调用this.triggerEvent('自定义事件名称',{/*参数对象*/ })，将数据发送到父组件
4. 在父组件的 js 中，通过 e.detail 获取到子组件传递过来的数据

实例：

// 父组件定义countAdd方法：
countAdd () {
  // dosomething.....
}
// 父组件的xwml：自定义事件
<son bind:addName="countAdd"></son>
// 子组件里.js
methods: {
  this.triggerEvent("addName",{value: this.properties.count})
}
// 父组件.js  
countAdd (e) {
  this.setDate({
    count: e.detail.value
  })
}