我是 Vue.js 新手,在使用带有子组件的组件时遇到了一些问题。我有以下内容.vue
files
app.vue
<template>
<section>
<menu></menu>
<h1>Create Your MIA</h1>
<div id="board"></div>
<slider>
<skin></skin>
</slider>
</section>
</template>
滑块.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>
我不确定我做错了什么。
我不是 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
, not slider
。为了添加skin
inside slider
范围,需要添加到slider
的模板。检查一下:https://vuejs.org/guide/components.html#Compilation-Scope 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 https://vuejs.org/guide/components.html#Content-Distribution-with-Slots
祝你好运!
Update:
如果你想要slider
组件与内容无关并且能够在其中插入您想要的任何内容,您有两个选择(我能想到的):
- 删除所有逻辑
slider
组件和制造商skin
的后裔app
。然后使用插槽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>
- 如果您知道滑块内部始终有一组封闭的组件,则可以使用动态组件:https://vuejs.org/guide/components.html#Dynamic-Components https://vuejs.org/guide/components.html#Dynamic-Components
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)