声明反应性属性（通过数组推送动态添加组件块）

Question

因此，我正在尝试创建一个Gutenburg风格的博客，正在研究一种块创建方法。我应该警告-这完全是我的方法，如果这是错误的方法- 伟大 ，让我知道，但是请< / strong>让我知道正确的方法！ ：）

回到问题。在我的项目中，我具有以下组件。

baseComponent.vue：

<template>
    <component v-for="contentBlock in contentBlocks" v-bind:is="contentBlocks.blockComponent" v-bind:key="contentBlock.id" transition="fade" transition-mode="out-in"></component>
</template>

<script>
import CodeBlockComponent from './codeBlockComponent';

export default {
  name: 'BaseComponent',
  components: {
    CodeBlockComponent <!-- Corresponds to the name given in './codeBlockComponent'
  },
  data: () => ({
    contentBlocks: []
  })
  watch: {
    contentBlocks () {
      console.log(this.contentBlocks)
    }
  },
  methods: {
    addCodeBlock () {
      console.log('Code Block Added!')
      this.contentBlocks.push({ 'id': this.contentBlocks.length + 1, 'blockType': 'code', 'blockComponent': 'CodeBlockComponent', 'content': '' })
    },
    addQuoteBlock () {
      console.log('Quote Block Added!')
      this.contentBlocks.push({ 'id': this.contentBlocks.length + 1, 'blockType': 'quote', 'content': '' })
    }
  }
}
</script>

在上面的地方，我从模板中删除了复杂性。

在同一baseComponent中，我还具有一些按钮，这些按钮可将块添加到contentBlocks数组中，在其中，当添加到该数组时，我的watch方法肯定会找到块（请参见下面的控制台输出屏幕截图）：

因此，一切似乎都正常-我现在准备添加块Components。我添加了第一个，并且在控制台中收到以下错误：

 vue.runtime.esm.js?2b0e:587 [Vue warn]: Property or method "CodeBlockComponent" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

我看了看建议去的文档，它们在这里：https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties

CodeBlockComponent.vue的示例：

<template>
  <div>
    <p>HELLO WORLD FROM THE CODE BLOCK!!</p>
  </div>
</template>

<script>
export default {
  name: 'CodeBlockComponent',
  data: () => ({
  }),
  computed: {
  },
  watch: {
  },
  methods: {
  }
}
</script>

我看了一眼，我会百分百诚实-我不太明白这告诉我要做什么...我觉得我已经宣布了反应性财产？任何人可以给我的任何建议或建议，将不胜感激！

我假设我不能简单地import CodeBlockComponent from './codeBlockComponent';来进行这种动态的组件渲染吗？ （但是，我现在真的不知道）...

Answer 1

我认为您所描述的内容应该可以正常工作，以防您在其中导入和声明

components: { ... }

在每个contentBlock.blockComponent中可以找到的所有可能的名称。请注意，这些组件的name: <String>必须与您的contentBlock.blockComponent完全相同。顺便说一下，我在您的示例中看不到来自addQuoteBlock的道具道具。

您还提供了文档链接，但这是关于道具的，在您的示例中效果很好。重新检查有关动态组件的部分，也许会有所帮助：https://vuejs.org/v2/guide/components.html#Dynamic-Components（小提琴上的注意链接）

还需要检查一件事：baseComponent.vue中的组件是否包装了一些组件？组件必须具有单个根元素。带有v-for的组件可能无法使用。