Vue.js 使用for循环立即创建动态组件

我想从父组件向动态组件添加数据

例如：

让我们取一个数字作为我想要传递给动态组件的数据

此代码段的o/p为：

欢迎家长留言

欢迎5

欢迎5

欢迎5

欢迎5

欢迎5

预期的o/p应为：

欢迎家长留言

欢迎1

欢迎2

欢迎3

欢迎4

欢迎5

let dynamicComponent={
模板：`
欢迎{{msg2}

`,
道具：['msg']，
数据（）{
返回{
msg2:this.msg
}
},
}
const App=新的Vue({
el:“#应用程序”，
数据（）{
返回{
parentMsg:“父消息”，
组成部分：[
动态组件
],
}
},
方法：{
加（）{
对于（设i=1；i问题在于

:msg="parentMsg"

所有动态组件都将prop
msg
绑定到该绑定的
parentMsg
。简单解释一下，它们都共享相同的parentMsg，当它从1变为2时，它在绑定的任何地方都会发生变化，依此类推，直到它变为5。您要做的是使用index而不是parentMsg，就像这样

:msg="index"

问题在于这个

:msg="parentMsg"

所有动态组件都将prop
msg
绑定到该绑定的
parentMsg
。简单解释一下，它们都共享相同的parentMsg，当它从1变为2时，它在绑定的任何地方都会发生变化，依此类推，直到它变为5。您要做的是使用index而不是parentMsg，就像这样

:msg="index"

您正在更新
parentMsg
并在for循环中添加新组件。在for循环完成后，Vue将更新DOM。到for循环完成时，您的
parentMsg
值将为
5
。这就是为什么您会看到所有
Welcome 5

实现您尝试的方法是通过在Vue的
$nextTick
回调函数中添加组件来进行
调度

我已将您的代码更新到以下，以获得所需的结果：

methods: {
    add () {
      this.addOneItem(1);
    },
    addOneItem(i) {
      if(i >= 6) return;
      this.parentMsg = i++
      this.components.push(Try)
      this.$nextTick(() => this.addOneItem(i));
    }
  }
}

在这里，我首先添加一个组件，然后计划在
$nextTick
回调中添加下一个组件

您可以阅读有关更新
parentMsg
并在for循环中添加新组件的更多信息。在for循环完成后，Vue会更新DOM。当for循环完成时，您的
parentMsg
值将为
5
。这就是为什么，您会看到所有
Welcome 5

实现您尝试的方法是通过在Vue的
$nextTick
回调函数中添加组件来进行
调度

我已将您的代码更新到以下，以获得所需的结果：

methods: {
    add () {
      this.addOneItem(1);
    },
    addOneItem(i) {
      if(i >= 6) return;
      this.parentMsg = i++
      this.components.push(Try)
      this.$nextTick(() => this.addOneItem(i));
    }
  }
}

在这里，我首先添加一个组件，然后计划在
$nextTick
回调中添加下一个组件

您可以阅读更多关于
$nextTick
的信息，因为您在for循环中一次添加了5个组件。这就是为什么您可以一次看到所有消息。如果您希望一次只看到一条消息，那么您应该一次添加一个组件。@sthotakura我想我的问题不是很清楚，所以更新了它，请查看预期的o/p和实际的o/p在for循环中一次ng 5个组件。这就是为什么您可以一次看到所有消息。如果您希望一次看到一条消息，那么您应该一次添加一个组件。@sthotakura我想我的问题不是很清楚，所以更新了它，请查看预期的o/p和实际的o/pnope，因为我正在为每个组件返回一个对象（数据中）为了使组件不共享引用.data（）{return{msg2:this.msg}}，@Nirman让我这样说，您正在从'this.components'呈现动态组件，它位于相同的data（）中作为parentMsg。现在，您的v-for在根目录中，parentMsg也在根目录中/上。因此，所有动态组件都引用相同的变量parentMsg。@Nirman注意，：msg=“parentMsg”意味着bind msg to parentMsg不复制parentMsg中的当前值。因此，当parentMsg中的值更改时，这些更改会反映parentMsg绑定到的所有位置。如果我没有将数据作为对象返回，则情况会是这样，并且“欢迎父消息”也会更改，因为它也会bing到parentMsgnope，因为我正在为每个组件（在数据中）打开一个对象，这样组件就不会共享引用。data（）{return{msg2:this.msg}，@Nirman让我这样说，您正在从'this.components'呈现动态组件，它位于相同的data（）中作为parentMsg。现在，您的v-for在根目录中，parentMsg也在根目录中/上。因此，所有动态组件都引用相同的变量parentMsg。@Nirman注意，：msg=“parentMsg”意味着bind msg to parentMsg不复制parentMsg中的当前值。因此，当parentMsg中的值更改时，这些更改会反映parentMsg绑定到的所有位置。如果我没有将数据作为对象返回，则会出现这种情况，“欢迎父消息”也会更改，因为它也会bing to parentMsg