Vue 组件的 this.$el 总是引用同一个 dom 元素答案

【问题标题】：this.$el of Vue components always reference the same dom elementVue 组件的 this.$el 总是引用同一个 dom 元素
【发布时间】：2018-10-01 00:52:54
【问题描述】：

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

<template> <vue-draggable-resizable @click="deleteFun"> </vue-draggable-resizable> </template> export default { method:{ deleteFun () { this.$el.remove(); } }}
在另一个文件中，我有这样的功能

function createText(){ let MyComponent =Vue.extend({ template:"<MText></MText>", components:{MText}, data () { return {} }}) return new MyComponent(); }
我有一个按钮，点击事件绑定一个函数“addText”，像这样

addText(){ let text = createText(); let panel = document.getElementById("palette"); let tp_dom = document.createElement("div"); tp_dom.setAttribute("id","id"); panel.appendChild(tp_dom); text.$mount(tp_dom); }
问题是当我运行“addText”两次时，dom“#palette” 有两个“MText”元素，然后，我点击第二个“MText”元素，为什么第一个“MText”被删除；“this.$el”总是引用第一个 “多行文字”

【问题讨论】：

请更新您的问题以便更好地理解
动态插入vue组件“MText”两次或三次，“MText”绑定一个点击事件可以移除它的dom元素，无论我点击之前插入哪个，它总是移除第一个“ MText”我插入。意思是我点击第二个插入的“MText”，不是它被删除，而是第一个插入的“MText”被删除。

标签： javascript vue.js

【解决方案1】：

我不知道您的问题是什么，但这里有一个工作示例： https://jsfiddle.net/oddswe36/

let i = 0;

// Register your component globally
Vue.component('MText', {
	template: `
  	<div @click="removeMe">click to remove me {{ counter }}</div>
  `,
  data() {
  	return {
    	counter: i++
    }
  },
  methods: {
  	removeMe() {
    	this.$el.remove()
    }
  }
})

function createText() {
  const MyComponent = Vue.extend({
    template:"<MText></MText>",
  })
  
  return new MyComponent();
}

function addText() {
  const text = createText();
  const panel = document.getElementById("palette");
  const tp_dom = document.createElement("div");
  tp_dom.setAttribute("id","id");
  panel.appendChild(tp_dom);
  text.$mount(tp_dom);
};

addText();
addText();
addText();
addText();

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<div id="palette"></div>

【讨论】：