如何正确绑定具名插槽属性？解决v-slot指令冲突问题

你遇到的错误是因为**#scopedSlot**是v-slot:scopedSlot的缩写语法，不能在同一个<template>标签上同时使用缩写语法和完整的v-slot="slotProps"指令，这属于重复绑定v-slot指令。

正确绑定方式 #

以下两种写法都可以解决问题：

写法1：缩写语法直接绑定作用域变量 #

<template #scopedSlot="slotProps">
  {{ slotProps.text }} {{ slotProps.count }}
</template>

写法2：完整v-slot语法指定插槽名和变量 #

<template v-slot:scopedSlot="slotProps">
  {{ slotProps.text }} {{ slotProps.count }}
</template>

额外注意事项 #

你的BaseLayer_0组件中greetingMessage变量未定义，需要在组件的data中声明，否则会出现undefined的问题：

<script>
export default {
  name: 'BaseLayer_0',
  data() {
    return {
      greetingMessage: 'Hello from scoped slot!'
    }
  }
}
</script>

修改后的完整App.vue代码 #

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>

  <BaseLayer_0>
    <template #header>
      <h1>header</h1>
    </template>

    <template #default>
      <p>default</p>
    </template>

    <template #footer>
      <p>footer</p>
    </template>

    <!-- 修正后的具名作用域插槽 -->
    <template #scopedSlot="slotProps">
      {{ slotProps.text }} {{ slotProps.count }}
    </template>
    
  </BaseLayer_0>

</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import BaseLayer_0 from './components/BaseLayer_0.vue'

export default {
  name: 'App',
  components: {
    HelloWorld,
    BaseLayer_0
  }
}
</script>

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