Vue插槽使用
前言
插槽的概念非常重要,大量的模块和插件中都有插槽的使用。
一、插槽的使用场景
父组件先子组件传递布局。
二、插槽使用方法 slot
1.插槽
<body>
<div id="root">
<child>
<p>Dell</p>
</child>
</div>
<script>
Vue.component('child',{
template:'<div><slot></slot></div>'
})
var vm = new Vue({
el:'#root',
methods:{
childClick(){
alert('childClick')
}
}
})
</script>
</body>
2.具名插槽
代码如下(示例):
<body>
<div id="root">
<child>
<div class="header" slot="header">header</div>
<div class="footer" slot="footer">footer</div>
</child>
</div>
<script>
Vue.component('child',{
template:`<div>
<slot name='header'></slot>
<div class='content'>content</div>
<slot name='footer'></slot>
</div>`
})
var vm = new Vue({
el:'#root',
methods:{
childClick(){
alert('childClick')
}
}
})
</script>
</body>
3.具名插槽默认
代码如下(示例):
<body>
<div id="root">
<child>
<!-- <div class="header" slot="header">header</div> -->
<div class="footer" slot="footer">footer</div>
</child>
</div>
<script>
Vue.component('child',{
template:`<div>
<slot name='header'>
<h1>default header</h>
</slot>
<div class='content'>content</div>
<slot name='footer'></slot>
</div>`
})
var vm = new Vue({
el:'#root',
methods:{
childClick(){
alert('childClick')
}
}
})
</script>
</body>
4.作用域插槽
代码如下(示例):
<body>
<div id="root">
<child>
<template slot-scope="props">
<li>{{props.item}}</li>
</template>
</child>
</div>
<script>
Vue.component('child',{
data:function(){
return {
list:[1,2,3,4]
}
},
template:`<div>
<ul>
<slot v-for='item of list' :item='item'>
</slot>
</ul>
</div>`
})
var vm = new Vue({
el:'#root',
methods:{
childClick(){
alert('childClick')
}
}
})
</script>
</body>