当前位置：首页 > news >正文

vue判断组件是否有传入的slot，有就渲染slot，没有就渲染内部节点默认内容

news 来源：原创 2025/4/29 2:18:50

注意观察变化：

情况1：有自定义默认内容，有自定义具名插槽title的时候

情况2：没有自定义默认内容，有自定义具名插槽title的时候

情况3：有自定义默认内容，没有自定义具名插槽title的时候

情况4：没有自定义默认内容，没有自定义具名插槽title的时候

子组件child.vue

<template>
  <div>
    <slot v-if="$slots.default" />
    <span v-else>默认内容</span>
    <slot name="title" v-if="$slots.title" />
    <span class="title" v-else>默认标题</span>
  </div>
</template>
<script>

父组件

<template>
  <div>
    <child>
      自定义内容
      <template slot="title">自定义标题</template>
    </child>
  </div>
</template>
<script>
import child from "@/vue/admin/demo/child";
export default { components: { child } };
</script>

知识普及＜template＞＜/template＞、＜slot/＞、slot-scope、v-slot傻傻分不清！他们究竟是干啥的？？？_template slot-scope-CSDN博客文章浏览阅读1.5k次。本文详细解释了Vue.js中的template、slot、slot-scope和v-slot的概念及其用法。template作为备用模板，不体现在HTML中；slot用于子组件替换父组件内容；slot-scope传递子组件变量给父组件；v-slot结合了slot和slot-scope的功能，可同时处理具名插槽和传递参数。https://blog.csdn.net/qq_37860634/article/details/132545377