微信小程序自定义组件的基本使用
组件与模块类似,实现了功能的复用,提高开发速率,减少代码量
在开发过程中 , 总会遇到一些功能板块是相同或很类似的 。如两个不同页面都有搜索框 , 或者 导航栏等 。
那么这个使用就很有必要使用组件了
组件文件创建
一般在根目录下创建一个 components 文件夹,用于保存各组件
组件模板
<!-- 组件内 -->
<view>
<view>组件内部</view>
<view>
组件使用
定义组件
在使用组件前 ,需要在使用组件的页面的 json 文件中进行定义。
// index.json
"usingComponents": {
"myCom":"../../components/com-1/com-1"
// 组件名 路径(一般相对路径)
}
也可以在 app.json 文件中进行去全局定义。 那么就无需在页面的 json文件配置了
配置的方法相同
在页面使用
<!-- 使用组件的页面 -->
<view>
<myCom></myCom>
</view>
<!-- 组件的内容会在页面显示 -->
插槽
插槽相当于是组件留出的一个位置 ,可以让页面向其提供其他页面结果。
插槽使用 slot 标签放在组件内 , 页面在使用组件时 ,在组件标签内传递标签等代码
<!-- 组件页面 -->
<view>
<view>我是组件内的标签</view>
<slot></slot> <!-- 插槽 -->
</view>
将代码写入插槽
<!-- 使用组件的页面 -->
<view>
<myCom>
<view>我是页面传入的内容</view>
</myCom>
</view>
这里相当于把 &