自定义组件_插槽

在组件模板中可以提供一个 <slot> 节点，用于承载页面引用时提供的子节点

这种方式与直接传递数据是有区别的，他是可以传递视图的！

实现组件

xxxxxxxxxx
<!-- components/list/list.wxml -->
<view>
    <view class="title">
        <slot></slot>
    </view>
    <view wx:for="{{ listData }}" wx:key="index">
        <view>{{ item }}</view>
    </view>
</view>

xxxxxxxxxx
// components/list/list.js
Component({
    properties: {
        listData:{
            type:Array,
            value:[]
        }
    }
})

xxxxxxxxxx
.title{
    margin: 5px;
}

温馨提示

在组件中，样式只允许使用class定义

引用组件

xxxxxxxxxx
{
    "usingComponents": {
        "list":"../../components/list/list"
    }
}

xxxxxxxxxx
<view>
    <list listData="{{ userList }}">
        <view style="font-size:30px;">{{ userTitle }}</view>
    </list>
    <list listData="{{ dataList }}">
        <view style="font-size:20px;">{{ dataTitle }}</view>
    </list>
</view>

xxxxxxxxxx
Page({
    data: {
        userList:["iwen","ime","frank"],
        userTitle:"用户列表",
        dataList:["前端","python","Java"],
        dataTitle:"课程列表"
    }
})