插槽
普通插槽
在子组件中,使用特殊的标签就可以为子组件开启一个插槽,该插槽插入什么内容取决于父组件的使用
<div id="app">
<comp>插槽被替换</comp>
</div>
<template id="tmp">
<h1>
<slot>我是一个默认插槽</slot>
</h1>
</template>
<script type="text/javascript">
let comp=Vue.extend({
template: "#tmp",
})
let app=new Vue({
el:"#app",
components:{
comp
}
})
</script>
具名插槽
当子组件功能复杂时,子组件可能不是一个,而是多个,那就要级插槽起一个具体的名字了,不然不知道是那个插槽了
<div id="app">
<comp>
<span slot="left">首页</span>
<span slot="center">内容</span>
<span slot="right">返回</span>
</comp>
</div>
<template id="tmp">
<h1>
<slot name="left">左</slot>
<slot name="center">中</slot>
<slot name="right">右</slot>
</h1>
</template>
<script type="text/javascript">
let comp=Vue.extend({
template: "#tmp",
})
let app=new Vue({
el:"#app",
components:{
comp
}
})
</script>