前端自定义组件如何实现追加元素的自动实例化

穷凶极恶丶带恶人
  • 440

非MVVM项目
比如定义组件 <component-a> 组件:

const ComponentA = function(ele){
    this.init(ele);
}
ComponentA.prototype = {
    constructor : ComponentA,
    init:function(ele){
      this.createElement(ele,this._getData(ele));
    },
    createElement:function(ele,data){
      this.getTargetElement([...this.ele.attributes],data)
      this._replaceElement(ele,targetEle);
    },
    getTargetElement(attributes,data){
      ……
    },
    getData(ele){
      ……
    },
    _replaceElement(ele){
      ……
    }
}

$("component-a").each(function(){
  new ComponentA(this);
})

使用方法为以下两种:

<component-a name="test1"></component-a>

<div name\="test2"></div> 
$("\[name=test2\]").componentA({params:params});

如果追加元素$(body).append('<component-a name="test3"></component-a>'),test3 在 dom 中存在还是以原始文本存在,而非替换成 <component-a> 组件。
那么怎么实现 <component-a> 才能让 test3 自动实例化呢?

回复
阅读 324
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏