默认插槽
子组件
<template>
<div>
<h1 style="color: blue">{{title}}</h1>
<!-- 指定数据显示的位置 -->
<slot>默认显示的内容</slot>
</div>
</template>
<script>
export default {
name: "SlotDemo",
props: ['title']
}
</script>
父组件
<template>
<div id="app">
<SlotDemo title="默认插槽">
<!-- 函数体的内容替换<slot></slot> -->
<p>这是给默认插槽的数据</p>
</SlotDemo>
</div>
</template>
<script>
import SlotDemo from '@/components/SlotDemo/SlotDemo'
export default {
name: 'App',
components: {SlotDemo},
}
</script>
具名插槽
子组件
<template>
<div>
<h1 style="color: blue">{{title}}</h1>
<!-- 指定数据显示的位置,并设置name -->
<slot name="slotOne">name: slotOne的插槽默认显示的内容</slot>
<slot name="slotTwo">name: slotTwo的插槽默认显示的内容</slot>
</div>
</template>
<script>
export default {
name: "SlotDemo",
props: ['title']
}
</script>
父组件
<template>
<div id="app">
<SlotDemo title="具名插槽">
<!-- 函数体的内容替换<slot name="slotOne"></slot> -->
<p slot="slotOne">这是给name: slotOne的插槽的数据</p>
</SlotDemo>
<SlotDemo title="具名插槽">
<!-- 函数体的内容替换<slot name="slotTwo"></slot> -->
<template v-slot:slotTwo>
<p>这是给name: slotTwo的插槽的数据</p>
</template>
</SlotDemo>
</div>
</template>
<script>
import SlotDemo from '@/components/SlotDemo/SlotDemo'
export default {
name: 'App',
components: {SlotDemo},
}
</script>
作用域插槽
子组件
<template>
<div>
<h1 style="color: blue">{{title}}</h1>
<!-- 指定数据显示的位置,并设置数据给父组件使用 -->
<slot :myData="myData">name: slotOne的插槽默认显示的内容</slot>
</div>
</template>
<script>
import {nanoid} from 'nanoid'
export default {
name: "SlotDemo",
props: ['title'],
data(){
return {
myData: nanoid()
}
}
}
</script>
父组件
<template>
<div id="app">
<SlotDemo title="作用域插槽">
<template scope="scopeData">
<!-- 函数体的内容替换<slot></slot> -->
<p>这是从插槽拿到的数据: {{scopeData.myData}}</p>
</template>
</SlotDemo>
<SlotDemo title="作用域插槽">
<template slot-scope="scopeData">
<!-- 函数体的内容替换<slot></slot> -->
<p>这是从插槽拿到的数据: {{scopeData.myData}}</p>
</template>
</SlotDemo>
</div>
</template>
<script>
import SlotDemo from '@/components/SlotDemo/SlotDemo'
export default {
name: 'App',
components: {SlotDemo},
}
</script>