uni-app 动态名称插槽父组件未显示定义默认插槽则插槽内容无效

发布于 1周前 作者 sinazl 来自 Uni-App

uni-app 动态名称插槽父组件未显示定义默认插槽则插槽内容无效

开发环境 版本号 项目创建方式
Windows win10 HBuilderX

产品分类：uniapp/小程序/微信

父组件 start  =====================================================  

<script setup>  
import { ref, watch, computed, watchEffect, onMounted, onUnmounted, toValue } from "vue";  
import TestSub from "./components/test-sub.vue";  
defineOptions({  
name: "Test",  
});  
const props = defineProps({});  
  
const options = ref([  
{  
label: "选项1",  
prop: "slot1",  
},  
{  
label: "选项2",  
prop: "slot2",  
},  
{  
label: "选项3",  
prop: "slot3",  
},  
]);  
</script>  
<template>  
<view class="test">  
<view class="">测试环境</view>  
<TestSub :options="options">  
<!-- <template v-slot:default>  </template> -->  
<template v-slot:slot1>  
<view>slot1插槽内容</view>  
</template>  
<template v-slot:slot2>  
<view>slot2插槽内容</view>  
</template>  
<template v-slot:slot3>  
<view>slot3插槽内容</view>  
</template>  
</TestSub>  
</view>  
</template>  
<style lang="scss">  
.test {  
}  
</style>  

父组件 end  =====================================================  

子组件 start  =====================================================  

<script setup>  
import { ref, watch, computed, watchEffect, onMounted, onUnmounted, toValue } from "vue";  
  
defineOptions({  
name: "TestSub",  
});  
const props = defineProps({  
options: {  
type: [Array, Object],  
default: () => [],  
},  
});  
</script>  
<template>  
<view class="test-sub">  
<view>子组件</view>  
<template v-for="(item, index) in options" :key="index">  
<view class="">  
<slot :name="item.prop">  
{{ item.prop }}  
</slot>  
</view>  
</template>  
</view>  
</template>  
<style lang="scss">  
.test-sub {  
}  
</style>  

子组件  end =====================================================

操作步骤：

<!-- <template v-slot:default>  </template> -->  这代码注释放开正常， 注释错误

预期结果：

动态名称插槽内容应该替换后备内容

实际结果：

动态名称插槽内容没渲染出来

bug描述：

动态名称插槽父组件未显示定义默认插槽则插槽内容无效

Harmonyos Next教程
1 回复

在 uni-app 中，动态名称插槽是一种非常灵活的内容分发方式，允许父组件通过指定插槽名称来渲染子组件中相应的内容。如果父组件没有为某个插槽提供内容，并且也没有定义默认插槽，那么该插槽内容将不会显示。为了确保插槽内容的有效性，你可以采取一些措施，例如为动态插槽定义默认值或确保父组件总是提供插槽内容。

以下是一个示例，展示了如何在 uni-app 中使用动态名称插槽，并处理父组件未提供插槽内容的情况。

子组件 (ChildComponent.vue)

<template>
  <view>
    <slot name="header"></slot>
    <slot name="content" :defaultContent="defaultContent">
      <!-- 默认内容 -->
      <text>This is the default content for the content slot.</text>
    </slot>
    <slot name="footer"></slot>
  </view>
</template>

<script>
export default {
  data() {
    return {
      defaultContent: 'This is dynamically set default content.'
    };
  }
};
</script>

父组件 (ParentComponent.vue)

<template>
  <view>
    <child-component>
      <template v-if="showHeader" #header>
        <text>This is the header slot content.</text>
      </template>
      <template v-if="showFooter" #footer>
        <text>This is the footer slot content.</text>
      </template>
      <!-- 注意：没有为content插槽提供内容，将显示默认内容 -->
    </child-component>
    <button @click="toggleHeader">Toggle Header</button>
    <button @click="toggleFooter">Toggle Footer</button>
  </view>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      showHeader: true,
      showFooter: false
    };
  },
  methods: {
    toggleHeader() {
      this.showHeader = !this.showHeader;
    },
    toggleFooter() {
      this.showFooter = !this.showFooter;
    }
  }
};
</script>

在这个示例中，ChildComponent 定义了三个插槽：header、content 和 footer。content 插槽有一个默认内容，如果父组件没有提供该插槽的内容，则显示默认内容。ParentComponent 动态地控制 header 和 footer 插槽的显示，但没有为 content 插槽提供内容，因此将显示 ChildComponent 中定义的默认内容。

通过这种方式，你可以确保即使父组件没有为某个插槽提供内容，子组件仍然能够显示有用的信息。

回到顶部