微信小程序__自定义组件

创建自定义组件

1.创建组件目录components(与pages同级)

2.给不同的组件在conponents中创建不同的文件夹（例：Tabs组件）

3.右键点击Tabs文件夹，点击新建component,即可创建所需文件

使用自定义组件

1.在page中新建一个页面demo，小程序页面显示当前页面内容

<!--pages/demo/demo.wxml-->
<text>pages/demo/demo.wxml</text>

结果：

2.修改demo.json中usingComponents属性

{
  "usingComponents": {
  	//组件名：组件的相对路径
    "Tabs":"../../components/Tabs/Tabs"
  }
}

3.在demo.wxml中直接引用组件

<!-- 使用组件 -->
<Tabs></Tabs>

运行结果如下：显示tabs页面的内容

组件之间的传值

一、父组件向子组件传值

父组件（页面）向子组件传递数据，通过标签属性方式来传递
1.在子组件中进行接收
2.把这个数据当成是data中的数据直接用即可

1.在父组件(demo)中定义一个数据

<!-- 
    1.父组件（页面）向子组件传递数据，通过标签属性方式来传递
        1.在子组件中进行接收
        2.把这个数据当成是data中的数据直接用即可
 -->
        <Tabs demo="happy"></Tabs>

2.在子组件（Tab）的Tab.js中的properties属性中接收父组件传递的参数demo

/**
   * 组件的属性列表
   * 里面存放的是要从父组件中接收的数据
   */
  properties: {
    demo:{
      //所传值的类型type
      type:String,
      //所传值的默认值value
      value:''
    }
  }

在demo对象中写出所传值的类型type和默认值value

3.在Tabs.wxml中直接引用demo

<text>{{demo}}</text>

以上三步即可实现父组件向子组件传值
结果：

二、子组件向父组件传值

子组件向父组件传递数据，通过事件的方式传递

1.触发父组件中的自定义事件，同时传递数据给父组件

子组件.js文件中：

	  // 获取被点击事件的索引index
      let {index}=e.currentTarget.dataset
      //触发父组件中的自定义事件，同时传递数据index给父组件
      this.triggerEvent("itemChange",{index})

注：
点击事件触发的时候，触发父组件中的自定义事件，同时传递数据给父组件：this.triggerEvent("父组件自定义事件的名称"，要传递的参数)

2.在子组件的标签上加入一个自定义事件

父组件.wxml文件中，在子组件标签上绑定子组件传来的自定义事件名称，并添加一个自定义函数：bind自定义事件名="自定义事件"

<Tabs tabs="{{tabs}}" binditemChange="handleItemChange"/>

3.在父组件.js文件中写自定义事件，用于接收子组件传递的数据

handleItemChange(e){
    //index即为子组件传来的数据
    const {index} = e.detail
    let {tabs}=this.data
    //对数组循环
    //[].forEach遍历数组的时候，修改了item，也会导致原数组被修改
    tabs.forEach((item,indexNum)=>{
    //console.log(indexNum);//0,1,2,3
        indexNum===index ? item.isActive=true:item.isActive=false
      })
    this.setData({
        tabs
      })
  }

注： 上述代码中的index即为子组件向父组件传递的数据

三、插槽传值

1.在子组件中需要传值的地方写一个slot标签

<slot></slot>

注： slot标签，其实就是一个占位符插槽，等到父组件调用子组件的时候，再传递标签过来，最终，这些被传递的标签，就会替换slot插槽的位置

2.父组件调用子组件

<Tabs tabs="{{tabs}}" binditemChange="handleItemChange">
    <block wx:if="{{tabs[0].isActive}}">0</block>
    <block wx:elif="{{tabs[1].isActive}}">1</block>
    <block wx:elif="{{tabs[2].isActive}}">2</block>
    <block wx:else>3</block>
</Tabs>

运行结果：点击不同按键，页面显示不同