插槽的基本使用（slot）
组件的插槽：
组件的插槽也是为了让我们封装的组件更加具有扩展性。
让使用者可以决定组件内部的一些内容到底展示什么。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>slot基本使用</title>
</head>
<body>
<div id="app">
<cpn><button>按钮一</button></cpn>
<cpn><span>插槽二</span></cpn>
<cpn><i>我自定义标签插槽</i></cpn>
<cpn></cpn>
</div>
<template id="cpn">
<div>
<h2>我是标题</h2>
<p>我是组件</p>
<slot><p>我是默认值，如果插槽没有添加，使用默认值</p></slot>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊'
},
components: {
cpn: {
template: '#cpn'
}
}
});
</script>
</body>
</html>
插槽预留位置，为日后扩展做准备，直接在模板中使用slot标签即可。
插槽可以有默认值，直接在slot里设置组件，可以是自定义组件，也可以是系统标签。使用时直接在自定义标签里填充，扩展内容（可以是另外一个组件，套娃）。如果没有填充，使用默认值填充。
插槽只有一个slot标签，不意味着只能在组件标签里填充一个html标签，可以填充任意个，整体用来替换插槽。
<div id="app"> <!--系统标签--> <cpn> <button>按钮一</button> </cpn> <!--未定义标签--> <cpn></cpn> <!--自定义标签--> <cpn><i>我自定义标签插槽</i></cpn> <!--多个标签--> <cpn> <div> <p>p1</p> <p>p2</p> </div> </cpn> </div>
具名插槽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>具名插槽</title>
</head>
<body>
<div id="app">
<cpn>
<button slot="left">左边替换成按钮</button>
<p slot="center">中间替换成p标签</p>
<h2 slot="right">右边替换成h2标签</h2>
</cpn>
</div>
<template id="cpn">
<div>
<slot name="left"><span>我是左边的</span></slot>
<slot name="center"><span>我是中间的</span></slot>
<slot name="right"><span>我是右边的</span></slot>
<slot><span>没有名字的</span></slot>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊'
},
components: {
cpn: {
template: '#cpn'
}
}
});
</script>
</body>
</html>
模板里可以预留多个插槽，而非只有一个。
每个插槽可以取一个具体名字，也可以不取，如果不取，在组件里使用插槽，所有未取名字都会被替换。
我们可以给需要区域替换的插槽取名字，然后在组件使用时，具体标签/子组件里使用slot属性绑定插槽名字,就可以实现局部替换。
默认值/替换值如下：
<div> <slot name="left"><span>我是左边的</span></slot> <slot name="center"><span>我是中间的</span></slot> <slot name="right"><span>我是右边的</span></slot> <slot><span>没有名字的</span></slot> </div>
<cpn> <button slot="left">左边替换成按钮</button> <p slot="center">中间替换成p标签</p> <h2 slot="right">右边替换成h2标签</h2> </cpn>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
