组件和子组件

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

经过一些研究，我发现了this，它指的是一个is=属性，它将包含子组件模板。

所以在app.vue

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

然后添加子组件。

Answer 2

我不能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的模板中。

其他一些事情：

• 对组件使用连字符分隔的名称，至少有两个单词：<custom-slider>而不是<slider>，例如，遵循Web (否则它可能与当前或即将出现的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. 如果您知道滑块内部总是有一组封闭的组件，则可以使用动态组件：https://vuejs.org/guide/components.html#Dynamic-Components