Vue内置组件之slot
先准备一个组件:
现在有一个需求是:在三个p标签里加上各自的内容,怎么实现呢?
总共分为两步:
第一步:在html的组件中用slot属性传递值(slot属性里写键名) .
<div id="app">
<jspang>
<!-- 第一步:传递数值(slot属性里写键名) -->
<span slot="bolgUrl">{{ jspangData.bolgUrl }}</span>
<span slot="netName">panda</span>
<span slot="skill">{{ jspangData.skill }}</span>
</jspang>
</div>
第二步:在组件模板中用slot标签接收值(注意slot标签是双标签,里面用name属性来接收).
<template id="tep">
<div>
<!-- 第二步接收slot标签的值(注意slot标签是双标签,里面用name属性来接收) -->
<p>播客地址:<slot name="bolgUrl"></slot></p>
<p>网名:<slot name="netName"></slot></p>
<p>所会技术:<slot name="skill"></slot></p>
>
</div>
</template>
实现效果:
附完整代码:
<!DOCTYPE html>
<html lang="en">
<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>lianxi</title>
</head>
<body>
<div id="app">
<jspang>
<!-- 第一步:传递数值(slot属性里写键名) -->
<span slot="bolgUrl">{{ jspangData.bolgUrl }}</span>
<span slot="netName">panda</span>
<span slot="skill">{{ jspangData.skill }}</span>
</jspang>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<template id="tep">
<div>
<!-- 第二步接收slot标签的值(注意slot标签是双标签,里面用name属性来接收) -->
<p>播客地址:<slot name="bolgUrl"></slot></p>
<p>网名:<slot name="netName"></slot></p>
<p>所会技术:<slot name="skill"></slot></p>
</div>
</template>
<script>
let jspang = {
template: '#tep'
}
let app = new Vue({
el: '#app',
data: {
jspangData: {
bolgUrl: 'http://jspang.com',
netName: 'jspang',
skill: 'web前端'
}
},
components: {
"jspang": jspang
}
})
</script>
</body>
</html>
官方案例:
需要注意的是插槽在vue2.6有变更,传送门:https://cn.vuejs.org/v2/guide/components-slots.html