微信小程序中递归组件的使用

1,231 阅读1分钟

使用递归组件,实现下面单选组织树组件(带搜素功能):

image.png image.png

第一、在components文件下,创建tree-node文件 tree-node.wxml 文件代码如下:

image.png tree-node.json文件代码如下:

{ "component": true, "usingComponents": { "tree-node":"../tree-node/tree-node" } }

tree-node.js 文件代码如下:

Component({

// 组件的属性列表(父级传过来的值)

properties: {

treeList: {
  type: Array,
  value: []
}

},

//组件的初始数据

data: {

treeList: []

},

ready() {

//初始化 下拉菜单赋值

this.setData({
  treeList: this.data.treeList
})

}, /**

  • 组件的方法列表 */ methods: {
boxTap(e) {
  //第一级按钮选中事件
  let pid = e.target.dataset.pid;
  //向父组件传值
  this.triggerEvent('treeRadioTap',pid)
},
getMask(e){
  //递归组件选中事件
  let pid = e.detail;
  this.triggerEvent('treeRadioTap',pid)
},

} })

第二、父组件中使用

1、 .json文件中引入:

 "tree-node":"../../components/tree-node/tree-node"

2、.wxml中使用 3、.js文件

 treeList[]  // 下拉数据
 

treeRadioTap(e) {

//tree视图 分类选中事件
let id = e.detail; //子组件传过来的值

}

源码在:github.com/XW666/wxiao…