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

Posted 2023-02-24

【中文标题】vue Dynamic Slot Names 错误模板应该只负责将状态映射到 UI

【英文标题】：vue Dynamic Slot Names Error Templates should only be responsible for mapping the state to the 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

【参考方案1】：

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

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

【讨论】：

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