具名插槽和作用域插槽
2021-11-16 本文已影响0人
懒懒猫
具名插槽
其实就是在父组件中添加一个 slot='自定义名字' 的属性，
然后在子组件中的 <slot><slot> 里面添加 name='自定义名字' 即可
如果父组件中有一部分没有添加 slot 属性，则此处就是默认的插槽，在子组件中的 <slot></slot> 直接就是使用的父组件的默认插槽部分
即：
任何没有被包裹在带有 v-slot 的 <template> 中的内容都会被视为默认插槽的内容。也就是匿名插槽
<child>
<template>
<p>ppppp</p>
</template>
</child>
作用域插槽
父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译。
不过，我们可以在父组件中使用 slot-scope（v-slot） 特性从子组件获取数据
前提是需要在子组件中使用 :data=data 先传递 data 的数据
我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除
使用
dom中
<slot name="header" :msg="msg" :num="num"></slot>
模板接收数据：
<template v-slot:header="data">
data是所有数据组成的集合
实例：
运行结果：
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>
