用程序生成的组件更新道具

Question

想象一个空的虚拟公告板，上面将放置未知数量的虚拟笔记。board是父组件，note是子组件。

当我点击板一个新的笔记出现在板上。当我移动鼠标时，注释应该跟随鼠标光标(我知道奇怪的UI，但为了这篇文章的缘故，我简化了)。

我通过实例化它来生成一个新的注释，然后像这样将它添加到dom:

let NoteClass = Vue.extend(Note);
let note = new NoteClass({
propsData: { x: this.clientX, y: this.clientY },
});
note.$mount();
this.$refs.board.appendChild(note.$el);

注意鼠标x/y是通过props传递给note的。这将导致当我单击时，注释出现在鼠标光标的位置。很好。

然而，一旦Note被实例化，它不再更新x/y道具。Note不会连续地从其父节点读取鼠标光标的位置。

完整代码:

https://codesandbox.io/s/boring-wiles-pru1y?file=/src/App.vue

要比较，请查看这个版本，其中注释不是在代码中生成的。一个音符以典型的方式放置。它正好跟在光标后面:

https://codesandbox.io/s/proud-tree-xnthc?file=/src/App.vue

Answer 1

我找到了一个更好的解决方案，感谢Michal Levý的评论——数据驱动的方式:

<template>
<div ref="board" class="board" @click.self="onClick" @mousemove.prevent="drag"> 
<Note v-for="(note, key) in notes" :key="key" :x="clientX" :y="clientY"></Note>
</div>
</template>
<script>
import Note from '@/components/Note.vue';
export default {
name: 'Board',
data() {
return {
clientX: 0,
clientY: 0,
notes: []
}
},
components: {
Note
},
methods: {
onClick() {
this.notes.push({});
},
drag(event) {
this.clientX = event.clientX;
this.clientY = event.clientY;
}
}
}
</script>