自定义组件-抽象节点

最新推荐文章于 2024-02-27 08:20:14 发布

原创最新推荐文章于 2024-02-27 08:20:14 发布 · 309 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

微信小程序专栏收录该内容

6 篇文章

订阅专栏

本文介绍了微信小程序中自定义组件的抽象节点特性，该特性允许组件模板中的某些节点由调用者决定。通过示例展示了如何在`selected-group`组件中使用抽象节点，并通过`generic:selectable`属性动态指定`custom-checkbox`或`custom-radio`作为实现。此外，还展示了在`index.wxml`中如何调用这些组件并切换默认实现。

抽象节点

官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/generics.html

有时，自定义组件模版的一些节点，其对应的自定义组件不是由自定义组件本身确定，而是由自定义组件的调用者确定的，

这时就可以把这个节点声明为抽象节点。

这个特性自小程序基础库版本 1.9.6 开始支持。

代码实操

//文件结构
-components
 -generics
		-custom-checkbox.js
		-...
		-custom-radio.js
		-...
		-default.js
    -...
    -selected-group.js
		-...
-pages
	-index
		-index.js

调用关系图

在这里插入图片描述

custom-checkbox.wxml

<checkbox disabled="{{ disabled }}" checked="{{ selected }}"></checkbox>

custom-checkbox.js

Component({
  properties: {
        disabled:Boolean,
        selected:Boolean
    },
})

custom-radio.wxml

<radio disabled="{{disabled}}" checked="{{ selected }}"></radio>

custom-radio.js

Component({
  properties: {
        disabled:Boolean,
        selected:Boolean
    },
})

selected-group.wxml

<!--抽象节点 -->
<view wx:for="{{labels}}" wx:key="this">
    <label bindtap="itemtap" data-index="{{index}}">
        <!-- 写抽象节点 -->
        <selectable disable="{{false}}" selected="{{selected[index]}}"/>
        {{item}}
    </label>
</view>

selected-group.js

Component({
	data: {
        labels:[1,2,3],
        selected:[false,true,false]
    },
})

selected-group.json

{
    "component": true,
    "usingComponents": {},
    "componentGenerics":{
        "selectable": {
            "default": "./default"
        }
    }
}

default.wxml

<text>开发中...</text>

index.json

{
  "usingComponents": {
    "selected-group":"/components/generics/selected-group",
    "custom-checkbox":"/components/generics/custom-checkbox",
    "custom-radio":"/components/generics/custom-radio"
  }
}

index.wxml

<view>
<!--   generic:xxx="yyy" yyy是静态值 --> 
    <selected-group generic:selectable="custom-checkbox"></selected-group>
    <selected-group generic:selectable="custom-radio"></selected-group>
  	//对应default.wxml
    <selected-group generic:selectable="default"></selected-group>
</view>