微信小程序⾃定义组件、父子组件传值

1、⾃定义组件

1.1. 创建⾃定义组件
可以在微信开发者⼯具中对应的目录下，右键快速创建组件的⽂件结构

类似于页面，一个自定义组件由 json wxml wxss js 4个文件组成

1.2 组件中的.js文件
在组件的 js ⽂件中，需要使⽤ Component() 来注册组件，并提供组件的属性定义、内部数据和 ⾃定义⽅法

Component({
  // 里面存放的是 要从父组件中接收的数据
  properties: {
    test: {
      // 期望要的数据是 string类型， value为属性值
      type: String,
      value: 'default',
    }
  },
  data: {
    // 这里是一些组件内部数据
    someData: {}
  },
  methods: {
    // 这里是一个自定义方法
    customMethod: function(){}
  }
})

2 使⽤⾃定义组件

2.1 声明引⼊⾃定义组件
⾸先要在需要引入组件的⻚⾯的 json ⽂件中进⾏引⽤声明。还要提供对应的组件名和组件路径

{
  // 引用声明
  "usingComponents": {
    // 要使用的组件的名称     // 组件的路径
    "my-header":"/components/myHeader/myHeader"
  }
}

2.2 ⻚⾯中使⽤⾃定义组件

<view>
  <!-- 以下是对一个自定义组件的引用 -->
  <my-header text="使用创建的组件"></my-header>
</view>

3.父子组件传值

1. ⽗组件通过绑定属性的⽅式给⼦组件传递值

2. ⼦组件通过触发事件的⽅式向⽗组件传递值

3.1 代码实现过程

⽗组件代码

// page.wxml,
// tabItems 为传递到子组件的自定义属性，mytap 为绑定的自定义方法
<tabs tabItems="{{tabs}}" bindmytap="onMyTab" >
    内容-这里可以放插槽
</tabs>

// page.js
 data: {
    tabs:[
     {name:"tab1"},
     {name:"tab2"}
   ]
 },
 onMyTab(e){
   console.log(e.detail);
},

⼦组件代码

// com.wxml
<view>
  <view>
    <block  wx:for="{{tabItems}}" wx:key="{{item}}">
      <view bindtap="handleItemActive" data-index="{{index}}">{{item.name}}</view>
    </block>
  </view>
  
  <view class="tab_content">
    // 插槽
    <slot></slot>
  </view>
</view>

// com.js
Component({
  // 里面存放的是 要从父组件中接收的数据
  properties: {
    // 接收父组件tabItems属性
    tabItems: {
      type: Array,  // 数组类型
      value: []    // 默认值
  },
  /**
   * 组件的初始数据
   */
  data: {
  },
  /**
   * 组件的方法列表
   */
  methods: {
    handleItemActive(e){
      // 这里触发父组件自定义方法 mytap，并传递参数
      this.triggerEvent('mytap','子组件中的值');
   }
 }
})

⾃定义组件触发事件时，需要使⽤ triggerEvent ⽅法，指定 事件名 、 detail 对象