时间戳

首页 > 解决方案 > 在渲染期间访问了属性“dynamicslotname”，但未在实例上定义

vue.js - 在渲染期间访问了属性“dynamicslotname”，但未在实例上定义

问题描述

在渲染期间访问了属性“dynamicslotname”，但未在实例上定义。在 vue3. 我正在测试 vue3 的动态插槽，但我错过了“在渲染期间访问了属性“dynamicslotname”但未在实例上定义的问题。在“

<!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">
  <base-layout>
    <template v-slot:[dynamicSlotName]>
      <p>Hello</p>
    </template>
  </base-layout>
</div>
</body>
<script>
  const baseLayout =  {
    template: `
    <div>
        <header>
          <slot name="header"></slot>
        </header>
    </div>
    `
  };
  const helloVue = {
    components: {
      baseLayout
    },
    data() {
      return {
        dynamicSlotName: "header"
      }
    }
  }
  Vue.createApp(helloVue).mount('#app')
</script>
</html>

标签： vue.jsvuejs3

解决方案

插槽名称应该用小写而不是camelCaselikedynamicslotname而不是dynamicSlotName

<!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">
  <base-layout>
    <template v-slot:[dynamicslotname]>
      <p>Hello</p>
    </template>
  </base-layout>
</div>
</body>
<script>
  const baseLayout =  {
    template: `
    <div>
        <header>
          <slot name="header"></slot>
        </header>
    </div>
    `
  };
  const helloVue = {
    components: {
      baseLayout
    },
    data() {
      return {
        dynamicslotname: "header"
      }
    }
  }
  Vue.createApp(helloVue).mount('#app')
</script>
</html>

有关更多详细信息，请查看https://v3.vuejs.org/guide/template-syntax.html#caveats

推荐阅读