一，新建一个组件文件
二，设置插槽
三，微信小程序里面插槽没有默认值需要用wxss来设置，检查插槽这个标签是否为空，如果为空则默认值的view显示
四，写入页面
五，插槽代码
<!--components/my-solt/my-slot.wxml-->
<view class="my-slot"><view class="content"><slot ></slot></view><view class="dis">默认值</view></view>
// components/my-solt/my-slot.js
Component({/*** 组件的属性列表*/properties: {},/*** 组件的初始数据*/data: {},/*** 组件的方法列表*/methods: {}
})
/* components/my-solt/my-slot.wxss */
.my-slot{margin: 20px 0;
}
.dis{display: none;
}
.content:empty + .dis{display: block;}
{"component": true,"usingComponents": {}
}
六，页面代码
<!--pages/six/six.wxml-->
<navigation-bar title="牧原" back="{{false}}" color="black" background="#FFF"></navigation-bar>
<view><view><my-slot class="my-slot"><button>牛马</button></my-slot><my-slot class="my-slot">牛马</my-slot><my-slot class="my-slot"></my-slot><my-slot class="my-slot"><button>牛马</button></my-slot></view>
</view>
// pages/six/six.js
Page({/*** 页面的初始数据*/data: {},/*** 生命周期函数--监听页面加载*/onLoad(options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {},/*** 生命周期函数--监听页面显示*/onShow() {},/*** 生命周期函数--监听页面隐藏*/onHide() {},/*** 生命周期函数--监听页面卸载*/onUnload() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {},/*** 页面上拉触底事件的处理函数*/onReachBottom() {},/*** 用户点击右上角分享*/onShareAppMessage() {}
})
/* pages/six/six.wxss */
{"usingComponents": {"navigation-bar": "/components/navigation-bar/navigation-bar","my-slot":"/components/my-solt/my-slot"},"enablePullDownRefresh": true
}
