具名插槽
使用的时候将需要的内容写在template标签中,并且通过v-slot:name(name表示插槽的名字)指令来指定插入的位置.
<body>
<div id="app">
<tab>
<template v-slot:header>
<div>我是插到header里面的元素</div>
</template>
<template v-slot:section>
<div>我插入到了section元素里面</div>
</template>
</tab>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var tab = {
template:`
<div>
<header>
<input type="text" placeholder="新不了情" />
<slot name="header"></slot>
</header>
<section>
<slot name="section"></slot>
</section>
</div>`
}
var vm = new Vue({
el:"#app",
components:{
tab
}
})
</script>
</body>
无名插槽
直接写需要插入的内容即可,内容将会插入到所有无名插槽中
<body>
<div id="app">
<tab>
<div>hello world</div>
</tab>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var tab = {
template:`
<div>
<footer>
<slot></slot>
</footer>
</div>`
}
var vm = new Vue({
el:"#app",
components:{
tab
}
})
</script>
</body>
vue-cli中应用
父组件
<test-one v-bind:list="message" v-on:getSonsData="sonData">
//无名插槽
{{getData}}
插槽
<template v-slot:head>
<p>我的内容插到到具名插槽中</p>
</template>
</test-one>
子组件
test页面的子组件
<div class="header">
<!--具名插槽-->
<slot name="head"></slot>
</div>
{{list}}
<button @click="toparent">发送数据给父组件</button>
<!--插槽-->
<slot></slot>
