Javascript Vue组件中的$el始终引用相同的dom元素

我有一个组件“MText”，主要代码如下：

导出默认值{
方法：{
deleteFun（）{
这个。$el.remove（）；
}
}}

在另一个文件中，我有这样一个函数

函数createText（）{
让MyComponent=Vue.extend({
模板：“”，
组件：{MText}，
数据（）{
返回{}
}})
返回新的MyComponent（）；}

我有一个按钮，点击事件绑定一个函数“addText”，如下所示

addText（）{
让text=createText（）；
let panel=document.getElementById（“调色板”）；
让tp_dom=document.createElement（“div”）；
tp_dom.setAttribute（“id”、“id”）；
panel.appendChild（tp_-dom）；
文本。$mount（tp_dom）；
}

问题是，当我运行“addText”两次时，dom“#调色板” 有两个“多行文字”元素，那么，我点击第二个“多行文字”元素，为什么 删除第一个“多行文字”；“this.$el”始终引用第一个 “多行文字”

---

我不知道你的问题是什么，但这里有一个有效的例子：

设i=0；
//全局注册您的组件
Vue.component（'MText'{
模板：`
单击以删除me{{counter}
`,
数据（）{
返回{
柜台：我++
}
},
方法：{
removeMe（）{
此.$el.remove（）
}
}
})
函数createText（）{
常量MyComponent=Vue.extend({
模板：“”，
})
返回新的MyComponent（）；
}
函数addText（）{
const text=createText（）；
const panel=document.getElementById（“调色板”）；
const tp_dom=document.createElement（“div”）；
tp_dom.setAttribute（“id”、“id”）；
panel.appendChild（tp_-dom）；
文本。$mount（tp_dom）；
};
addText（）；
addText（）；
addText（）；
addText（）

请更新您的问题，以便更好地理解动态插入vue组件“MText”两次或三次，“MText”绑定一个可以删除其dom元素的单击事件，无论我之前单击哪一个，它总是删除我插入的第一个“MText”。表示我单击了第二个插入的“MText”，而不是删除它，但第一个插入的“多行文字”将被删除。