Question

因此，我创建了此测试codepen，该测试使我可以将组件动态添加到已经存在的页面中，但是这里的问题是我不知道如何将道具传递给他们。我见过another question，也有类似的疑问，他们在哪里使用动态视图在多个组件之间切换。但是所有这些操作在呈现页面本身之前就已经完成。

单击按钮，我希望能够按名称动态创建组件，例如：

<button-counter :input="'TestText'"></button-counter>
<vue-header :input="'TestText'"></vue-header>

当前有效的方法是动态创建组件，但没有道具。因此，放置诸如button-counter或vue-header之类的东西将能够创建组件（适用于该组件的任何组件）。

Answer 1

我对您的Codepen on my fork here作了一些小的修改。你很亲密！

最大的不同是children的实现以及我们如何呈现动态组件。

原始

const App = new Vue({
  el: '#app',

  data: {
    componentName: "componentName",
    input: "input",
    children: [
      buttonCounter,
      vueHeader
    ]
  },

  methods: {
    add () {
      this.children.push(this.componentName)
    },
  }
});

已修改

const App = new Vue({
  el: '#app',

  data: {
    componentName: "componentName",
    input: "input",
    children: [
      { componentName: 'button-counter', input: 'I am a button' },
      { componentName: 'vue-header', input: 'I am a header' }
    ]
  },

  methods: {
    add () {
      this.children.push({ 
        componentName: this.componentName, 
        input: this.input 
      })
    },
  }
});

同样，您的v-for也将在模板上进行更改，以适应children数组的新形状：

<template v-for="(child, index) in children">
  <component :is="child.componentName" :input="child.input" :key="child.name" />
  <br>
</template>

因此，如您所见，通过将children设置为可以接受任何道具的对象数组，可以将这些道具传递给动态组件。在这种情况下，对于定义为该对象数组一部分的两个自定义组件，我们都有一个名为input的道具。

要注意的一件事是，对于Vue.js中的动态组件，is道具可以接受组件本身（例如您的原始方法）或已注册组件的字符串表示< / em>。那部分是您的原件和我的叉子之间的主要区别。

hth！

如何将道具/数据传递到动态添加的组件？

1 个答案: