所有动态生成的组件都在VUEJS中更改为相同的值。

Question

我们正在用Vuejs构建一个聊天应用程序，现在每个聊天消息都是我们应用程序中的组件，现在每当我们更改一个聊天消息的值时，所有聊天消息的值都会发生变化。

发生了什么

​

​

源代码

应用程序组件

const App = new Vue({
      el: '#myApp',
      data: {
        children: [
          MyCmp
        ],
        m1: '',
        m2: '',
        m3: 'Hello world',
        m4: 'How are you'
      },
      methods: {
        sendMessage (event) {
          if(event.key == "Enter") {
            this.m2= this.m3;
            this.children.push(MyCmp);
          }
        },
      }
    });

组件代码

let MyCmp = {
      props: ['myMessage'],
      template: `
      <li class="self">
          <div class="avatar"><img src="" draggable="false"/></div>
          <div class="msg">
            <p>{{ myMessage }}</p>
          </div>
      </li>
      `
    };

**查看组件生成的位置**

<ol class="chat">
        <template v-for="(child, index) in children">
          <component :is="child" :key="child.name" v-bind="{myMessage: m3}"></component>
        </template>
    </ol>

Answer 1

即使您通过将新组件推入子数组来创建新组件，它们仍然通过行v-bind="{myMessage: m3}"绑定到相同的数据。每当您更改m3时，都会将其传递给所有子组件，它们都将呈现相同的消息。

这是创建自定义组件的一种奇怪方法，因为您可以使用Vue提供的模板语法或呈现函数轻松地创建自定义组件。

解决方案1-建议

更改您的方法--将消息字符串而不是卡片组件定义推送到children中，并在v-for中使用MyCmp呈现消息卡。

因此，新模板可以重构为:-

<ol class="chat">
    <template v-for="(message, index) in children">
        <my-cmp :key="index" :my-message="message"></my-cmp>
    </template>
</ol>

在App中，您可以将this.children.push(MyCmp)替换为this.children.push(messageVariable);，其中messageVariable包含从输入框接收到的消息。

为什么是推荐的？这是一种标准方法，其中组件列表是基于数据数组呈现的。它将更容易的规模和维护。

解决方案2

您可以使用一次指令一次将消息绑定为静态文本。即使父服务器上的m3发生了更改，绑定也不会更新。

然后MyCmp模板将变成:-

<li class="self">
    <div class="avatar"><img src="" draggable="false"/></div>
        <div class="msg">
        <p v-once>{{ myMessage }}</p>
    </div>
</li>

Answer 2

将所有组件实例的myMessage绑定到一个变量m3。因此，当m3被更改时，所有实例中的myMessage都会分别发生变化。使用另一个变量(例如msg)呈现消息，然后仅在初始化msg时使用myMessage属性，如下所示：

let MyCmp = {
  props: ['myMessage'],
  data: function () {
    return {
      msg: this.myMessage
    }
  },
  template: `
    <li class="self">
      <div class="avatar"><img src="" draggable="false"/></div>
        <div class="msg">
          <p>{{ msg }}</p>
        </div>
    </li>
   `
};