Vue3使用动态插槽提示dynamicslotname未在实例上定义如何解决

错误原因 #

报错是DOM模板的自动小写转换特性导致的：

• 直接写在HTML文件里的Vue模板属于DOM模板，浏览器会自动把所有标签的attribute名转换为全小写
• 你代码里写的v-slot:[dynamicSlotName]会被浏览器自动转为v-slot:[dynamicslotname]，但你实例里定义的data属性是驼峰格式的dynamicSlotName，两者不匹配，因此触发属性未定义的报错。

解决方案 #

有两种可行的修复方式：

方案1：将动态变量名改为全小写 #

把data里定义的属性名改成全小写即可匹配转换后的插槽名：
修改对应代码即可：

data() {
  return {
    // 改为全小写，匹配DOM模板转换后的变量名
    dynamicslotname: "header"
  }
}

同时修改模板里的插槽引用：

<template v-slot:[dynamicslotname]>
  <p>Hello</p>
</template>

方案2：使用字符串模板规避DOM模板的小写转换 #

直接把根组件的模板定义在组件的template选项里，而不是写在HTML的<div id="app">节点中，就不会触发浏览器的自动小写转换，修改后的完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://unpkg.com/vue@next"></script>
  <script src="https://unpkg.com/lodash@4.17.20/lodash.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
</head>
<body>
<div id="app"></div>
</body>
<script>
  const baseLayout =  {
    template: `
    <div>
        <header>
          <slot name="header"></slot>
        </header>
    </div>
    `
  };
  const helloVue = {
    components: {
      baseLayout
    },
    // 模板写在组件选项里，属于字符串模板，不会被自动转小写
    template: `
      <base-layout>
        <template v-slot:[dynamicSlotName]>
          <p>Hello</p>
        </template>
      </base-layout>
    `,
    data() {
      return {
        dynamicSlotName: "header"
      }
    }
  }
  Vue.createApp(helloVue).mount('#app')
</script>
</html>

内容的提问来源于stack exchange，提问作者zhouxin