vue动态槽名错误模板应该只负责将状态映射到UI

Question

我正在使用vejs(2.6.11)动态槽名错误:模板应该只负责将状态映射到UI。避免在模板中放置带有副作用的标签，例如，因为它们将不会被解析。

为什么错误?

下面是我的代码:

LightBox。vue文件

<template>
<div>
<header>
<slot name="header">Default Header</slot>
</header>
<hr />
<main>
<slot>Default Body</slot>
</main>
<hr />
<footer>
<slot name="footer">Default Footer</slot>
</footer>
</div>
</template>
<script>
export default {};
</script>
<style scoped>
</style>

应用程序。vue文件

<template>
<div id="app">
<label v-for="(opt, index) in options" :key="index">
<input type="radio" :value="opt" v-model="dynamic_slot_name" /> {{ opt }}
</label>
<br><br><hr>
<light-box>
<template v-slot:[dynamic_slot_name]>
<h2>Hello Kieey</h2>
</template>
</light-box>

</div>
</template>
<script>
import LightBox from "./components/LightBox.vue";
export default {
name: "App",
components: {
LightBox,
},
data() {
return {
options: ["header", "footer", "default"],
dynamic_slot_name: "header",
};
},
};
</script>
<style>
</style>

这里有错误代码

Answer 1

不知道为什么，但是模板解析器在解析动态槽语法v-slot:[dynamic_slot_name]时遇到了麻烦。试试这个:

<template v-slot:[dynamic_slot_name]="">