<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.current{
color:red;
}
</style>
<script src="https://cdn.bootcss.com/vue/2.6.6/vue.min.js"></script>
</head>
<body>
<div id="app">
<!-- <test-a>这个是什么</test-a> -->
<!-- 定义多个slot ---具名插槽 -->
<test-b>
<p slot='footer'>这是底部</p>
<p>这是内容1</p>
<p>这是内容2</p>
<p slot='header'>这是顶部</p>
</test-b>
<!-- slot 只能在一个标签上写，
如果要多个标签，可以用<template></template>包裹，这个标签不会再模板里呗渲染 -->
<test-b>
<template slot='footer'>
<p >这是底部1</p>
<p >这是底部2</p>
</template>
<!-- <p slot='footer'>这是底部</p> -->
<p>这是内容1</p>
<p>这是内容2</p>
<p slot='header'>这是顶部</p>
</test-b>
<!--作用域插槽 -->
<test-c :list='list'>
<!-- 父组件对子组件的内容进行加工处理 -->
<template slot-scope="slotProps">
<strong v-if='slotProps.info.id===2' class="current">{{slotProps.info.name}}</strong>
<span v-else>{{slotProps.info.name}}</span>
</template>
</test-c>
<!-- v3.x v-solt -->
</div>
</body>
<script>
// Vue.component('test-a',{
// template:`
// <div>
// <h3>Warning:</h3>
// <slot>这个是slot</slot>
// </div>
// `
// })
// var app = new Vue({
// el:'#app',
// data:{}
// })
//具名插槽
Vue.component('test-b',{
template:`
<div>
<header>
<slot name='header'></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name='footer'></slot>
</footer>
</div>
`
})
// var app = new Vue({
// el:'#app',
// data:{}
// })
// 作用域插槽
Vue.component('test-c',{
props:['list'],
template:`
<div>
<ul>
<li :key='item.id' v-for='item in list'>
<slot :info='item'>{{item.name}}</slot>
</li>
</ul>
</div>
`
})
var app = new Vue({
el:'#app',
data:{
list:[
{
id:1,
name:'app'
},
{
id:2,
name:'orange'
},
{
id:3,
name:'banana'
}
]
}
})
</script>
</html>