微信小程序自定义组件的基本使用

微信小程序自定义组件的基本使用

组件与模块类似，实现了功能的复用，提高开发速率，减少代码量

在开发过程中 ， 总会遇到一些功能板块是相同或很类似的 。如两个不同页面都有搜索框 ， 或者 导航栏等 。

那么这个使用就很有必要使用组件了

组件文件创建

一般在根目录下创建一个 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>

这里相当于把 <view&g