三种插槽用法
- 默认插槽: 在组件内定义一个slot 组件标签里的内容可以被传递进来
- 具名插槽: 在slot上写入name 在组件标签里的内容需要被template包起来 并且要写入 v-slot=“name”
- 作用域插槽:可以在slot中 传递数据 并且 组件标签内template上可以接收,传过来是一个对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VUE-插槽</title>
</head>
<body>
<div id="app">
<children>
<p>哈哈哈</p>
<!-- 使用具名插槽 v-slot="title" 简写 #title -->
<template #title>
嘻嘻嘻
</template>
<!-- 使用作用域插槽 v-slot:footer="{data}" 可以简写为下面的代码-->
<template #footer="{data}">
<p v-for="item in data">{{item}}</p>
</template>
</children>
</div>
<template id="children">
<div>
<!--插槽共有内容-->
<p>我是子组件 啦啦啦</p>
<!--默认插槽-->
<slot></slot>
<!--具名插槽-->
<slot name="title"></slot>
<!--作用域插槽-->
<slot name="footer" :data="['a','b','c']"></slot>
</div>
</template>
</body>
<script src="./vue.js"></script>
<script>
let vue = new Vue({
el: '#app',
components: {
children: {
template: '#children',
}
}
})
</script>
</html>