微信小程序 component组件

1、引用组件的页面
index.wxml

<!-- 引用组件的页面模版 -->
<!-- 注意 一定要再component-tag-name.js里面的properties生命要传递过去的属性变量myProperty，不然接收不到-->
<view>
  <my-component bindmyevent="myEventListener"  myProperty="{{dataFieldB}}">
     <!-- 这部分内容将被放置在组件 <slot name="before"> 的位置上 -->
    <view slot="before">这里是插入到组件slot name="before"中的内容</view>
    <!-- 这部分内容将被放置在组件 <slot name="after"> 的位置上 -->
    <view slot="after">这里是插入到组件slot name="after"中的内容</view>
  </my-component>
</view>

index.json文件
定义使用的组件

{
  "usingComponents": {
    "my-component": "/components/component-tag-name"
  }
}

index,js

Page({
  data: {
    dataFieldB:[
      {
        path: "menu1_item1",
        component: "menu1_item1",
        name: "menu1_item1",
      },
      {
        path: "menu1_item1",
        component: "menu1_item1",
        name: "menu1_item1",
      }
    ]
  },
 //接收组件传递过来的值
  myEventListener: function(e) {
    console.log(e)
  }
})

2、组件页面
component-tag-name.json定义自己是component组件

{
  "component": true,
  "usingComponents": {}
}

component-tag-name.wxml

<!-- 组件模板 -->
<view class="wrapper">
  <slot name="before"></slot>
  <view>这里是组件的内部细节</view>
  <slot name="after"></slot>
  <button bindtap="onTap">点击这个按钮将触发“myevent”事件</button>
  <view wx:for="{{myProperty}}" wx:key="{{item.id}}">{{item.name}}</view>
</view>

component-tag-name.js

Component({
  //一些组件选项
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  properties: {
    myProperty: { // 属性名
      type: Array, // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
      value: [], // 属性初始值（可选），如果未指定则会根据类型选择一个
      observer: function (newVal, oldVal) {
        console.log(this.data)
        console.log(oldVal)
        console.log(newVal)
      } // 属性被改变时执行的函数（可选），也可以写成在methods段中定义的方法名字符串, 如：'_propertyChange'
    }
  },
  methods: {
    onTap: function() {
     // detail对象，提供给事件监听函数,在引用组件里面可以接收到改值
      var myEventDetail = {
        a: 3,
        b: 4,
        c: 5
      };
      // 提供给事件的监听函数 
      var myEventOption = { };
      // 触发事件的选项 
      this.triggerEvent('myevent', myEventDetail, myEventOption)
    },
  }
})