小程序自定义组件

如何使用自定义组件，并且传值给父组件。

一. 定义

1. 新建一个 components 的目录，目录下用来放各个组件。
2. 在目录下再新建一个目录，命名为组件名，这个目录下包含 js、html、css、json四个文件，文件名都是组件名。
3. 在 json 文件中声明组件：

{
  "component": true
}

4. 在 html、css 文件里写好自己要的元素和样式
5. 在 js 文件里注册组件，包含组件的属性和内部数据以及自定义方法

Component({
  properties: {
   
  },
  data: {

  },
  methods: {

  }
})

二. 使用

1. 在要使用这个组件的页面的 json 文件中引用声明

{
  "usingComponents": {
    "component-tag-name": "/components/xx/xxx"
  }
}

2. 在 html 文件调用：

<view class="container log-list">
  <component-tag-name></component-tag-name>
</view>

三. 父组件向子组件传值

1. 在 html 文件里调用时传入：

<component-tag-name text="hello"></component-tag-name>

2. 在自定义组件的 js 文件里接收：

Component({
  properties: {
     text: {
      type: String,
      value: '',
    }
  },

3. 和普通页面一样在 html 里使用：

<view>{{text}}</view>

四. 子组件向父组件传值：

1. 子组件在自己 js 文件的方法里使用 triggerEvent 方法，第一个参数是父组件里的监听事件名，第二个参数是要传递的参数：

this.triggerEvent('myevent', this.data.value)

2. 父组件调用子组件时需要绑定该监听事件：

<component-tag-name text="hello" bind:myevent="getValue"></component-tag-name>

3. 在父组件 js 文件里使用绑定的方法获取数据：

getValue: function(e) {
  console.log(e.detail)
}