默认插槽
父组件
<template>
<div>
<B>
<div class='intoMessage'>插进组件里面的内容哈哈</div>
</B>
</div>
</template>
<script>
import B from "@/template/b";
export default {
components:{
B
}
}
</script>
子组件
<template>
<div>
<slot></slot>
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
.intoMessage{color: red;}
</style>
子组件的<slot></slot>会替换成父组件里的
<div class='intoMessage'>插进组件里面的内容哈哈</div>
有名字的插槽
父组件
<template>
<div>
<B>
<p>default</p>
<p slot="message">message</p>
</B>
</div>
</template>
<script>
import B from "@/template/b";
export default {
components:{
B
}
}
</script>
子组件
<template>
<div>
<slot></slot>
<slot name='message'></slot>
</div>
</template>
<script>
export default {
}
</script>
子组件的 <slot></slot> 会被父组件的<p>default</p>替换
子组件的 <slot name='message'></slot> 会被父组件的<p slot="message">message</p>替换
作用域插槽
此插槽用于子组件向父组件传递数据,刚好和上面介绍的插槽相反。
例子
子组件
<template>
<div class="about">
<slot :list="list"></slot>
</div>
</template>
<script>
export default {
data () {
return {
list : [{
name : 'tom',
score : 80
},{
name : 'marry',
score : 99
}]
}
}
}
</script>
<style scoped>
</style>
父组件
<template>
<div class="hello">
<about>
<template slot-scope="user">
<ul>
<li v-for="item in user.list">
{{user}} {{item.name}} ----- {{item.score}}
</li>
</ul>
</template>
</about>
</div>
</template>
<script>
import about from './about'
export default {
components : {
about
},
created(){
}
}
</script>
<style scoped>
</style>
父组件通过slot-scope=xxx,可以获取到子组件绑定在slot上的数据。上面的例子中,子组件绑定在slot的是一个list数组。slot-
scope=xxx这里的xxx是一个变量,随便叫什么名字都可以。