《十》微信小程序中自定义组件的组件模板、组件样式和 JSON 配置

原创

已于 2025-02-03 11:09:26 修改 · 8.1k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序

于 2020-03-03 12:00:20 首次发布

组件 WXML 模板：

组件模板的写法与页面模板相同。

数据绑定：

与页面中的 WXML 类似，可以使用数据绑定。

<!-- custom-component.wxml -->
<view>
	{
  
  {transferVal}}
	{
  
  {personalVal}}
</view>

// custom-component.js
Component({
  properties: {
    transferVal: {
    	type: String,
    	value: '我是引用自定义组件的页面传递过来的数据'
    }
  },
  data: {
  	personalVal: '我是自定义组件的内部数据'
  },
})

<!--index.wxml-->
<custom-component transfer-val="{
  
  {pageVal}}" />

slot 插槽：

组件的 slot 节点可以用于承载组件使用者提供的 WXML 结构。

默认情况下，一个组件的 WXML 中只能有一个 slot 。

<!-- 自定义组件 sort-tabs.wxml -->
<view>
  <view>这里是组件的内部节点</view>
  <slot></slot>
</view>

<!-- 引用自定义组件的页面 index.wxml -->
<view>
  <sort-tabs>
    <!-- 这部分内容将被放置在 sort-tabs 组件 <slot> 的位置上 -->
    <view>这里是插入到自定义组件 slot 位置的内容</view>
  &l