【开源DEMO】我也不知道这是个什么组件

版本 v2
码云地址：https://gitee.com/tpswpu/compoment
有需求就更新ing…

目录结构

|-component
	|-v2
	    |-index.css //封装的组件样式
	    |-index.js //操作函数
	    |-index.html //demo

思考，这个组件可以拿来做什么？有价值吗？

1. 同页面间数据联动、通信
2. 状态管理
3. 页面操作记录

组件效果

使用示例

• 1、引入组件

• 2、指定result-item在DOM上的挂载点

  目前只支持挂载在id="result-body"的DOM元素上

  如：
  
  数据联动生成的DOM结构，就会挂载在id="result-body"的DOM元素下

• 3、指定联动数据入口

  有两种方式指定联动数据入口

  • 方式一：使用class="menu-item" 【推荐，但是有限制条件：需要为双标签，且联动显示的数据是双标签的文本内容】

    如：

    COMPONENT测试1
    COMPONENT测试2
    COMPONENT测试3
    COMPONENT测试4
    COMPONENT测试5
    

  • 方式二：显式调用函数 handleClickMenuItem(key, value)

  
  	COMPONENT测试6
  	COMPONENT测试7
  	COMPONENT测试8
  	COMPONENT测试9
  	COMPONENT测试10
  
  

api

• 显式调用使用组件 handleClickMenuItem(key, value)

• 获取拼接KEY的结果集 getJointKey()

• 获取拼接Value的结果集 getJointValue()

• 重置 handleClickReset()

后续

如果只需要联动传输一个值，可以查看v1版本：https://gitee.com/tpswpu/compoment/tree/v1/