手机网站 搜索优化 百度放单平台

注意观察变化： 

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