默认插槽
父组件
// 父组件
<div>
// 调用子组件
<slotOne1>
<p style="color:red">我默认插槽内容</p>
</slotOne1>
</div>
子组件
Vue.component('soltOnel',{
template:`
<div>我是子组件</div>
// 显示插槽内容
<slot></slot>
`
})
一个组件中只能有一个默认插槽。相对应的,具名插槽就可以有很多个,只要名字(name属性)不同就可以了
具名插槽
父组件
// 父组件
<div>
// 调用子组件
<slotOne1>
<p slot='footer' style="color:red">我是具名插槽内容0</p>
<p slot='footers' style="color:pink">我是具名插槽内容1</p>
</slotOne1>
</div>
子组件
Vue.component('soltOnel',{
template:`
<div>我是子组件</div>
<slot name="footer"></slot>
<slot name="footers"></slot>
`
})
作用域插槽
父组件
<div id="app">
<slot-three>
<template slot-scope="scope">
<div v-for="(item, index) in scope.dataList" v-bind:key="index">
{{item}}
</div>
</template>
</slot-three>
</div>
<script>
var vm new Vue({
el: '#app',
data: {
},
mounted() {
}
})
</script>
子组件
Vue.component('slot-three', {
data: function () {
return {
user: [
{ name: 'Jack', sex: 'boy' },
{ name: 'Jone', sex: 'girl' },
{ name: 'Tom', sex: 'boy' }
]
}
},
template: `
<div>
<slot :dataList="this.user"></slot>
</div>
`,
methods: {
}
})