Vue.js 组件和子组件

我是Vue.js新手，在使用带有子组件的组件时遇到了一些问题。我有以下

.vue

文件

app.vue

创建你的MIA

slider.vue

{{*标题}
一些内容
从“/skin”导入皮肤；
导出默认值{
组成部分：{
皮肤：皮肤
}
};

皮肤.vue

导出默认值{
数据（）{
返回{
标题：“选择肤色”
};
}
};

我正在尝试将蒙皮子组件加载到组件中。除了皮肤子组件之外，其他一切都很好，因为它没有被编译。不过，我没有收到任何与编译或vue相关的错误。我还希望能够有几个这样的滑块组件实例

app.vue

创建你的MIA

---

我不确定我做错了什么。

我不能100%确定您希望在这里实现什么，但要在组件中编译组件，您需要在父级模板中添加子组件，如下所示：

Slider.vue（我简化了结构）：

App.vue：

<template>
  <section>
    <menu></menu>
    <h1>Create Your MIA</h1>
    <div id="board"></div>
    <slider></slider>
  </section>
</template>

<template>
  <section>
    <menu></menu>
    <h1>Create Your MIA</h1>
    <div id="board"></div>
    <slider>
      <skin></skin>
    </slider>
  </section>
</template>
<script>
import skin from './skin'
export default {
  skin: skin
}
</script>

创建你的MIA
从“/皮肤”导入皮肤
导出默认值{
皮肤：皮肤
}

如果知道滑块内部始终有一组闭合的组件，则可以使用动态组件：

---

经过一些研究，我发现它引用了一个

is=

属性，该属性将排除子组件模板

所以在app.vue中

<slider-component>
      <div is="skin-component" v-for="colour in colours"></div>
    </slider-component>

---

然后添加子组件

谢谢您的建议。我将

蒙皮

组件和

滑块

组件分开，因为我希望能够“重用”滑块组件，并将

蒙皮

替换为其他组件，例如

我是否能够在不复制滑块组件的情况下遵守这一点？为什么您说的是“app.vue”的“后代”而不是“子组件”？没有理由，但你是对的，“子组件”“更有意义。嗯。。。我正在查看代码，我认为它不会工作，因为我想在app.vue组件中运行多个滑块组件。这应该是公认的答案+1用于

。。。组件的名称用连字符分隔

suggestion。这实际上是个好主意。让我知道它是否如预期的那样工作。它确实@HectorLorenzo

<template>
  <section>
    <menu></menu>
    <h1>Create Your MIA</h1>
    <div id="board"></div>
    <slider>
      <skin></skin>
    </slider>
  </section>
</template>
<script>
import skin from './skin'
export default {
  skin: skin
}
</script>

<slider-component>
      <div is="skin-component" v-for="colour in colours"></div>
    </slider-component>