组件和子组件

问题描述

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

I'm new to Vue.js and I'm having a bit of trouble using components with sub-components. I have the following .vue files

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>

我正在尝试将皮肤子组件加载到该组件中.除了skin子组件，其他所有东西都运行良好，因为它没有被编译.我没有得到任何与编译或Vue相关的错误.我还希望能够拥有这样的滑块组件的多个实例

I'm trying to load the skin sub component into the component. Everything works well except for the skin sub component as it doesn't get compiled. I do not get any compile or vue related errors though. I also wanted to be able to have several instances of the slider component like this

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>

我不确定自己做错了什么.

I'm not sure what I am doing wrong.

推荐答案

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

After some research I found this which refers to a is= attribute that will transclude the sub-component template

因此在app.vue中

so in app.vue

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

然后添加子组件

这篇关于组件和子组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！