vue组件嵌套组件不显示

使用条件指令 (Using conditional directives)

The simplest option is to use the v-if and v-else directives.

最简单的选择是使用v-if和v-else指令。

Here’s an example. The v-if directive checks the noTodos computed property, which returns false if the state property todos contains at least one item:

这是一个例子。 v-if指令检查noTodos计算属性，如果state属性todos包含至少一项，则返回false：

<template>
  <main>
    <AddFirstTodo v-if="noTodos" />
    <div v-else>
      <AddTodo />
      <Todos :todos=todos />
    </div>
  </main>
</template>

<script>
export default {
  data() {
    return {
      todos: [],
    }
  },
  computed: {
    noTodos() {
      return this.todos.length === 0
    }
  }
}
</script>

This allows to solve the needs of many applications without reaching for more complex setups. Conditionals can be nested, too, like this:

这样可以解决许多应用程序的需求，而无需进行更复杂的设置。 条件语句也可以嵌套，如下所示：

<template>
  <main>
    <Component1 v-if="shouldShowComponent1" />
    <div v-else>
      <Component2 v-if="shouldShowComponent2" />
      <div v-else>
        <Component3 />
      </div>
    </div>
  </main>
</template>

使用component Component and is (Using the component Component and is)

Instead of creating v-if and v-else structures, you can build your template so that there’s a placeholder that will be dynamically assigned a component.

您可以构建模板，而不是创建v-if和v-else结构，以便有一个占位符将动态分配给组件。

That’s what the component component does, with the help of the v-bind:is directive.

这就是component组件在v-bind:is指令的帮助下所做的事情。

<component v-bind:is="componentName"></component>

componentName is a property of the state that identifies the name of the component that we want to render. It can be part of the state, or a computed property:

componentName是状态的属性，用于标识我们要呈现的组件的名称。 它可以是状态的一部分，也可以是计算属性：

<script>
export default {
  data() {
    return {
      componentName: 'aComponent',
    }
  }
}
</script>

翻译自: https://flaviocopes.com/vue-dynamically-show-components/

vue组件嵌套组件不显示