这是一个创建于 1667 天前的主题，其中的信息可能已经有所发展或是发生改变。
比如定义组件 <component-a> 使用方法为以下两种：
<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 自动实例化呢？
第 1 条附言 · 2020-06-01 16:31:51 +08:00
组件实现代码大概是这样
const ComponentA = function(ele){
let componentA = {
init:function(){
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){
……
}
}
componentA.init();
return componentA;
}
$("component-a").each(function(){
new ComponentA(this);
})
11 条回复 • 2020-06-02 08:10:55 +08:00
 |
1
Marstin OP 难顶
|
 |
2
temporary 2020-06-01 11:22:26 +08:00
vue?
|
 |
3
TomatoYuyuko 2020-06-01 11:22:50 +08:00
你这个问题给我整蒙了，你这用了 mvvm 的框架是吗，那还用 jq 做 dom 操作？
|
|
4
Marstin OP @TomatoYuyuko @temporary 就是没用 mvvm 框架才有这问题啊，现在很烦
|
|
5
TomatoYuyuko 2020-06-01 15:42:53 +08:00
@Marstin 你这是什么框架或者插件写的组件
|
 |
6
rioshikelong121 2020-06-01 15:47:38 +08:00
看看你的框架有没有提供什么主动渲染 Component 的方法。
|
|
7
Marstin OP |
|
8
temporary 2020-06-01 17:55:05 +08:00
document.body.append(document.createElement('component-a'))
|
|
9
TomatoYuyuko 2020-06-01 18:02:33 +08:00
你这么写好绕啊，非得用 JQ 的话，干脆给$挂个新方法，把 append 封装一下不就好了？
$(body)._append('<component-a name="test3"></component-a>') |
 |
10
twelvechen 2020-06-02 07:57:27 +08:00  1
使用 MutationObserver 监听 DOM 变动，然后在回调里实例化试试？
|
|
11
Marstin OP @twelvechen MutationObserver 确实完全能满足需求的，就有点担心性能
|
Select Language