Vue之componet之初识slot
本人理解在组件内预留的类似占位符。便于功能扩展。
1.默认插槽。即不具名。一个不带 name 的 出口会带有隐含的名字“default”。
完整示例。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../js/vue.js"></script>
<title>component-slot</title>
</head>
<body>
<div id="app">
<mycomponet></mycomponet>
</div>
<script>
Vue.component("mycomponet", {
template: `
<div>
<h3>I am componet</h3>
<slot><h1>我是默认插槽</h1></slot>
</div>
`
})
new Vue({
el: "#app",
})
</script>
</body>
</html>
运行结果如图:
如果不在组件内给出具体替换内容则显示默认。如果既无默认,则不显示。
更改代码
<div id="app">
<mycomponet></mycomponet>
<mycomponet>
<span>我来点新东西</span>
</mycomponet>
</div>
运行结果:
如果一个组件里有多个插槽,则需要具名插槽。完整代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../js/vue.js"></script>
<title>component-slot</title>
</head>
<body>
<div id="app">
<mycomponet>
<span>我来点新东西</span>
<template v-slot:myfirst>
<h1>我是第一</h1>
</template>
<template v-slot:mysecond>
<h2>我是第二</h2>
</template>
<template #mythird>
<h3>我是第三</h3>
</template>
</mycomponet>
</div>
<script>
Vue.component("mycomponet", {
template: `
<div>
<h3>I am componet</h3>
<slot name="myfirst" ><h1>我是默认插槽</h1></slot>
<slot name="mysecond"></slot>
<slot name="mythird"></slot>
</div>
`
})
new Vue({
el: "#app",
})
</script>
</body>
</html>
运行结果:
2.60版本后使用v-slot引入插槽名称,v-slot:可缩写为 # 。
总结:
具名插槽只有引引入名字后才替换。