标签：bubuko 图片 sharp 元素 component 浏览器 default http sha
<template>
<div>
<child>若子组件没有slot，则这句话不会显示</child>
</div>
</template>
<script>
import Child from ‘./Child.vue‘
export default {
name: ‘HelloWorld‘,
components:{
‘child‘:Child
}
}
</script>
子组件内容
<template> <div> <h1>我是子组件</h1> </div> </template>
浏览器显示
因为子组件没有<slot> 元素，所以父组件的内容被抛弃，现在我们在子组件加上<slot> 元素
<template> <div> <h1>我是子组件</h1> <slot></slot> </div> </template>
此时浏览器显示
此时，父组件的内容就显示在了子组件的内容里了。
上面案例中讲解的是当组件的模板中有一个slot的方法，那么一个组件中如果想使用多个slot那么此时就应该使用具名slot。
父组件内容
<template>
<child>
<h1 slot="h1">标题一</h1>
<h2 slot="h2">标题二</h2>
<h3>标题三</h3>
</child>
</template>
<script>
import Child from ‘./Child.vue‘
export default {
components:{
‘child‘:Child
}
}
</script>
子组件内容
<template> <div> <h1>我是子组件</h1> <slot name="h1"></slot> <slot name="hh"></slot> <slot></slot> </div> </template>
浏览器显示
分析：子组件中的slot有name属性，与父组件的slot的值相对应，那么就会匹配到，若子组件中slot有name属性，但父组件没有与之相对的slot的值，则会被抛弃掉。父组件没有slot值的内容则会显示在默认的slot中。如果子组件中没有默认的slot,父组件没有slot值的内容就会被抛弃。
标签：bubuko 图片 sharp 元素 component 浏览器 default http sha
原文地址：https://www.cnblogs.com/clicklin/p/9389892.html
