vue Dynamic Slot Names 错误模板应该只负责将状态映射到 UI答案

【问题标题】：vue Dynamic Slot Names Error Templates should only be responsible for mapping the state to the UIvue Dynamic Slot Names 错误模板应该只负责将状态映射到 UI
【发布时间】：2021-05-29 11:44:45
【问题描述】：

我正在使用 Vuejs(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>

App.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>

Error code here

【问题讨论】：

标签： vue.js vuejs2

【解决方案1】：

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

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

【讨论】：

是的，绝对看起来像 Vue 2 模板编译器错误。在 Vue 3 中无需任何更改即可工作...