Question

我有一个组件“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”总是引用第一个 “多行文字”

Answer 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>

这个。$ el的Vue组件总是引用相同的dom元素

1 个答案: