欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 文旅 > 八卦 > vue判断组件是否有传入的slot,有就渲染slot,没有就渲染内部节点默认内容

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

2025/4/17 16:55:16 来源:https://blog.csdn.net/qq_37860634/article/details/146474783  浏览:    关键词:vue判断组件是否有传入的slot,有就渲染slot,没有就渲染内部节点默认内容

注意观察变化: 

情况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

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词