具名插槽
其實就是在父組件中添加一個 slot='自定義名字' 的屬性，
然后在子組件中的 <slot><slot> 里面添加 name='自定義名字' 即可
如果父組件中有一部分沒有添加 slot 屬性，則此處就是默認的插槽，在子組件中的 <slot></slot> 直接就是使用的父組件的默認插槽部分
即：
任何沒有被包裹在帶有 v-slot 的 <template> 中的內(nèi)容都會被視為默認插槽的內(nèi)容。也就是匿名插槽
<child>
<template>
<p>ppppp</p>
</template>
</child>
作用域插槽
父組件模板的所有東西都會在父級作用域內(nèi)編譯；子組件模板的所有東西都會在子級作用域內(nèi)編譯。
不過，我們可以在父組件中使用 slot-scope（v-slot） 特性從子組件獲取數(shù)據(jù)
前提是需要在子組件中使用 :data=data 先傳遞 data 的數(shù)據(jù)
我們?yōu)榫呙宀酆妥饔糜虿宀垡肓艘粋€新的統(tǒng)一的語法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 這兩個目前已被廢棄但未被移除
使用
dom中
<slot name="header" :msg="msg" :num="num"></slot>
模板接收數(shù)據(jù)：
<template v-slot:header="data">
data是所有數(shù)據(jù)組成的集合
實例：
運行結(jié)果：
111ppppp3
Hello
22222
<!DOCTYPE html>
<html lang="zh-CN">
<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>
</head>
<body>
<div id="app">
<child>
<template v-slot:header="data">
<p>{{data.msg}}ppppp{{data.num}}</p>
</template>
<template v-slot:footer>
<p>22222</p>
</template>
</child>
</div>
<script src="./js/vue.js"></script>
<script>
const child = ({
data() {
return {
msg: 111,
num: 3
}
},
template: `<div>
<slot name="header" :msg="msg" :num="num"></slot>
Hello
<slot name="footer"></slot>
</div>`
})
var vm = new Vue({
el: '#app',
data: {
},
methods: {},
components: {
child
}
});
</script>
</body>
</html>
