基本使用
<!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>插槽</title>
</head>
<body>
<div id="app">
<!-- slot无内容，组件无内容，默认不展示slot -->
<cpn1></cpn1>
<!-- slot无内容，组件有内容，组件内容代替slot -->
<cpn1>hello vuejs</cpn1>
<hr>
<!-- slot有内容，组件无内容，默认展示slot -->
<cpn2></cpn2>
<!-- slot有内容，组件有内容，组件内容代替slot -->
<cpn2>hello world</cpn2>
</div>
<template id="cpn1">
<div>
<h2>我是组件1标题</h2>
<p>我是组件1内容</p>
<!-- 1.默认插槽无内容，使用组件时，组件内部内容会替代插槽 -->
<slot></slot>
</div>
</template>
<template id="cpn2">
<div>
<h2>我是组件2标题</h2>
<p>我是组件2内容</p>
<!-- 默认插槽有内容，若正常使用组件则会默认渲染组件样式，若内部传值则展示传值样式 -->
<slot><button>btnClick</button></slot>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
components: {
cpn1: {
template: "#cpn1"
},
cpn2: {
template: "#cpn2"
}
}
})
</script>
</body>
</html>
image.png
具名插槽
<!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>具名插槽</title>
</head>
<body>
<div id="app">
<!-- 通过name属性命名插槽，通过slot属性替换对应插槽 -->
<cpn1>
<button slot="left">返回上级</button>
<span slot="center">百度一下</span>
<button slot="right">全部已读</button>
</cpn1>
</div>
<template id="cpn1">
<div>
<slot name="left"></slot>
<slot name="center"></slot>
<slot name="right"></slot>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data() {
return {
message: "hello vuejs"
}
},
components: {
cpn1: {
template: "#cpn1"
}
}
})
</script>
</body>
</html>
image.png
作用域插槽
<!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>作用域插槽</title>
<!-- 父组件替换插槽标签，但是内容是子组件提供 -->
<!-- 当子组件展示的数据样式不符合父组件的需求 -->
</head>
<body>
<!-- 父组件模板只可以获取父组件定义的data值 -->
<div id="app">
<!-- 第一次组件展示是默认ul-li -->
<cpn></cpn>
<!-- 第二次组件展示是默认ul-li -->
<cpn></cpn>
<!-- 第三次组件展示是默认span展示 -->
<cpn>
<!-- 目的是拿到子组件的pLanguage -->
<!-- 2.定义template元素 -->
<!-- 3.设置属性slot-scope="slot" -->
<template slot-scope="slot">
<div>
<!-- 4.通过slot.data可以获取到子组件传过来的数据 -->
<span v-for="item in slot.data">{{ item }}</span>
<p>{{ slot.data.join(" - ")}}</p>
</div>
</template>
</cpn>
</div>
<!-- 子组件模板只可以获取到子组件定义的data值 -->
<template id="cpn">
<div>
<!-- 定义插槽，默认展示插槽内容，如果想改变样式，组件内部提供 -->
<!-- 1.slot元素v-bind绑定data值 -->
<slot :data="pLanguages">
<ul>
<li v-for="item in pLanguages" :key="item">{{ item }}</li>
</ul>
</slot>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
components: {
cpn: {
template: "#cpn",
data() {
return {
pLanguages: ["JavaScript", "jQuery", "Vue", "Java"]
}
}
}
}
})
</script>
</body>
</html>
image.png
