组件和子组件

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>

skin.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相关的错误.我还希望能够有这样的滑块组件的几个实例

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

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