以省市数据为例，组件效果如下：技术亮点：1.前后端通信结合，实现动态热更新渲染数据2.在组件中设置访问器属性中使用setter和getter3.使用事件监听和抛出实现级联效果4.实现自定义组件结构和样式开发思路：1.Ajax请求：1）页面初始化请求只请求省数据，整个渲染和省数据接口在交互过程中只会请求一次。2）在回调函数loadHandler中：判断本次ajax请求的是哪个接口，如果是请求省份数据，则获取到省份数据后，将数据赋值给组件的showData属性，从而渲染出省份组件，并同时级联去请求市级和县级数据并渲染；如果本次请求市级接口，则只渲染市级和县级数据，省级数据不变。3）给组件绑定点击监听事件，当组件被点击时抛出数据，携带被点击的组件名称和当前选中的参数；同理，用上面2)中的方法判断点击的是哪一级数据，从而选择性地请求市级、县级数据或者只请求县级数据2.set/getaccessorattribute:1)setbool在组件中作为访问器属性。当点击事件触发时，bool值反转，同时ul列表样式绑定bool值，实现动态变化2）给组件设置一个accessor属性showData，当省或市的数据更改后，修改后的数据相应赋值给showData，同时触发showData中的方法，重新渲染组件的组件代码如下：importComponentfrom"./Component.js";//该组件的超类，主要作用是将elem属性声明为div元素，并创建appendTo方法插入到目标页面指定的dom元素中importUtilsfrom"./Utils.js";//公共方法，主要调用Utils.addCSS方法将样式添加到目标页面的样式表中exportdefaultclassLabelextendsComponent{_bool=false;//访问属性：setter和getter_showData=[];//访问器属性名；构造函数（_name）{超级（）；this.name=_name;this.elem.className="dropup";只为组件设置css样式，监听元素的点击事件this.elem.addEventListener("click",(e)=>this.clickHandler(e));//渲染组件样式this.setStyle();}render(){//渲染组件的主要DOM结构this.elem.innerHTML="";this.elem.innerHTML=`
