<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>vue基础扩展8--solt详解</title>
</head>
<body>
<!---
一、旧的插槽
概述：插槽是什么？ 顾明思意就是，在组件内定义了一个占位符，可以用来拿到组件包裹的内容进行渲染。
或者说我们在使用组件时，在组件内填写的元素会在组件内部定义的solt标记渲染。
1、旧的api
方式1： 组件内<solt></solt>, 使用：组件标签包裹内容即solt内容。
方式2: 组件内<solt name="xx"><solt>， 使用：包裹内容内： <element solt="xx"> <element>
方式3： 组件内<solt :todo="todo">，使用：在方式2基础上通过<template slot-scope="scope"> scope.todo 传递绑定的属性
-->
<!--2、旧的api综合使用案例-->
<div id="app">
<slot2 :msg="msg">
<div slot="head">我是头</div>
<div slot-scope="scope">我是默认:{
{scope.msg}}</div>
<div slot="foot">我是尾</div>
</slot2>
</div>
<script>
var vm = new Vue({
el:'#app',
data() {
return {
msg:'hello world！'
}
},
components:{
slot2:{
props: ['msg'],
template:`<div>
<slot name="head"></slot>
<slot :msg="msg"></slot>
<slot name="foot"></slot>
</div>`
}
}
});
</script>
<!--
3、 新的api方式
组件内模板定义solt的方式不变， solt变成v-solt
方式2 ：<element v-solt:xx> </element> 或者 <element #xx> </element>
方式3 ：<element v-solt="slotProps"> </element> 或者 <element #default="slotProps"> </element>
-->
<!--
4、改写范例
-->
<div id="app1">
<slot2 :msg="msg">
<template #head><div>我是头</div></template>
<template #default="scope"><div>我是默认:{
{scope.msg}}</div></template>
<template #foot><div>我是尾</div></template>
</slot2>
</div>
<script>
var vm = new Vue({
el:'#app1',
data() {
return {
msg:'hello world！'
}
},
components:{
slot2:{
props: ['msg'],
template:`<div>
<slot name="head"></slot>
<slot :msg="msg"></slot>
<slot name="foot"></slot>
</div>`
}
}
});
</script>