1. 具名插槽
在子组件中使用 <slot>标签定义插槽，父组件可使用slot指令替换子组件中的插槽内容。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>插槽</title>
</head>
<body style="background-color: antiquewhite;">
<div id="app">
<cpn>
<span slot="center" style="color: red;">替换后的中间</span>
</cpn>
</div>
</body>
<template id="cpn">
<div>
<p>我是子组件</p>
<slot name="left"><span>左边</span></slot>
<slot name="center"><span>中间</span></slot>
<slot name="right"><span>右边</span></slot>
</div>
</template>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script>
const app = new Vue({
el: '#app',
components:{
cpn:{
template: '#cpn'
}
}
})
</script>
</html>
2. 作用域插槽
父组件需要使用子组件中的数据可使用作用域插槽
- 子组件的
<slot>中定义一个:data属性（名称可自拟） - 父组件中可用
v-slot:default=“slot”取得子组件的属性，default为子组件插槽的名称，"slot"可自定义。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>作用域插槽</title>
</head>
<body style="background-color: antiquewhite;">
<div id="app">
<cpn></cpn>
<cpn>
<template v-slot:default="slot">
<span v-for="item in slot.data">{{item}} - </span>
</template>
</cpn>
</div>
</body>
<template id="cpn">
<div>
<slot :data="pLanguages">
<ul>
<li v-for="item in pLanguages">
{{item}}
</li>
</ul>
</slot>
</div>
</template>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script>
const app = new Vue({
el: '#app',
components:{
cpn:{
template: '#cpn',
data(){
return{
pLanguages:['Javascript', 'Java', 'C#', 'Python', 'Go']
}
}
}
}
})
</script>
</html>
