vue.js - 组件和子组件

Question

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

app.vue

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

slider.vue

<template>
  <div id="slider-panel">
    <h3>{{* heading}}</h3>
    <div class="slider">
      <slot>
        Some content
      </slot>
    </div>
  </div>
</template>

<script>
import skin from "./skin";
  export default {
    components: {
      skin: skin
    }
  };
</script>

皮肤.vue

<template>
    <div v-for="colour in colours">
      <div :style="{ backgroundColor: colour }">
        <img src="../assets/images/MIA.png"/>
      </div>
    </div>
</template>

<script>
  export default {
    data() {
      return {
        heading: "Choose Skin Tone"
      };
    }
  };
</script>

我正在尝试将皮肤子组件加载到组件中。除了皮肤子组件之外，一切都运行良好，因为它没有被编译。我没有收到任何编译或 vue 相关的错误。我还希望能够拥有多个这样的 slider 组件实例

app.vue

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

我不确定我做错了什么。

Answer 1

我不是 100% 确定你想在这里实现什么，但是要在组件内部编译组件，你需要在父模板中添加子组件，如下所示:

Slider.vue(我简化了结构):

<template>
  <div id="slider-panel">
    <h3>{{* heading}}</h3>
    <skin></skin>
  </div>
</template>
<script>
import skin from './skin'
export default {
  components : {
    'skin': skin
  }
}
</script>

App.vue:

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

实际上，如果你加上skin在应用程序的模板中将其添加到 slider 中组件模板，它被包含(并呈现)，假设它的范围是 app , 不是 slider .为了添加skin里面slider范围，需要添加到slider的模板。检查这个:https://vuejs.org/guide/components.html#Compilation-Scope

一些其他的东西:

• 使用连字符分隔的组件名称，至少包含 2 个单词:<custom-slider>而不是 <slider> ，例如，遵循 Web Components API(否则它可能会与当前或即将推出的 Web 组件发生冲突)。
• 插槽很难掌握，因此请仔细阅读:https://vuejs.org/guide/components.html#Content-Distribution-with-Slots

祝你好运!

更新:

如果你想要 slider组件与内容无关并且能够在其中插入任何你想要的东西，你有两个选择(我能想到的):

1. 删除 slider 中的所有逻辑组件和制造 skin来自 app 的后代.然后在 slider 中使用插槽组件，如下所示:

slider .vue:

<template>
  <div id="slider-panel">
    <h3>{{* heading}}</h3>
    <slot></slot>
  </div>
</template>
<script>
export default {}
</script>

App.vue:

<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>

1. 如果你知道 slider 内部总是有一组封闭的组件，你可以使用动态组件:https://vuejs.org/guide/components.html#Dynamic-Components