使用以编程方式生成的组件保持道具更新答案

【问题标题】：Keep props updated with programatically generated components使用以编程方式生成的组件保持道具更新
【发布时间】：2021-10-03 23:50:57
【问题描述】：

想象一个空的虚拟公告板，其中将放置未知数量的虚拟笔记。 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 被实例化，它就不再更新 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

【问题讨论】：

Note 不会从其父级连续读取鼠标光标的位置 ...是的，因为它没有父级。为什么要像这样实例化子组件而不是使用标准的 Vue“数据驱动”方式？
您能详细说明一下吗？你会怎么做？
vuejs.org/v2/guide/list.html#v-for-with-a-Component

标签： vue.js components

【解决方案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>

【讨论】：