1:分为匿名插槽,具名插槽,作用域插槽。
2:代码:
先声明一个在slt.vue这个一个组件组件中定义。
注意: 这里say是自定义的,只在该插槽中有用。
在引用组件中使用作用域插槽slot-scope读取这个属性值hello。
{{aaa.say}}-----footer
<template>
<div>
<h2>这是插槽</h2>
<slot name="header" ></slot>
<slot></slot>
<slot name="footer" say="hello"></slot>
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>
在另外一个组件中引用这个组件:
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br>
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
<slt>
<div slot="footer" slot-scope="aaa">{{aaa.say}}----footer</div>
<p slot="header">header</p>
<div>好啊</div>
</slt>
</div>
</template>
<script>
import Slt from "./slt.vue";
export default {
name: 'HelloWorld',
props: {
msg: String
},
components:{
Slt
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus">
h3
margin 40px 0 0
ul
list-style-type none
padding 0
li
display inline-block
margin 0 10px
a
color #42b983
</style>