vue--slot插槽的使用方式
Posted wangweigit3077
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue--slot插槽的使用方式相关的知识，希望对你有一定的参考价值。
- slot 插槽可以在子组件中为父组件要传递的标签占位置 能够有效的减少代码冗余 使代码更加有逼格
- 第一个例子
<body>
<div class="app">
<child> //假注释。。。 这里的span标签会替代子组件child中的slot标签 当child标签中没有任何东西的时候 会显示默认值 就是那句话
<span>hehaha</span>
</child>
</div>
</body>
<template id="tpl">
<div>
<span>haha</span>
<slot>当父组件没传值过来 就显示这个</slot>
</div>
</template>
<script>
Vue.component(‘child‘,{
template:‘#tpl‘,
})
const app = new Vue({
el:‘.app‘
})
</script>
-
- 第二个例子
-
<body> <div class="app"> <child> <div slot="reserved">reserved---保留的</div> <div slot="ww">ww---帅气的</div> </child> </div> </body> <template id="tpl"> <div> <!-- 原本每一个slot插槽都会显示出 child 标签包裹的所有内容 解决这个问题方式就是具名插槽 给上面每一个div 命名slot 值 然后再 slot 插槽中使用name属性绑定命名 --> <slot name="reserved">当父组件没传值过来 就显示这个</slot> <span>haha</span> <slot name="ww">当父组件没传值过来 就显示这个</slot> </div> </template> <script> Vue.component(‘child‘,{ template:‘#tpl‘, }) const app = new Vue({ el:‘.app‘ })代码中有解释了。。。
以上是关于vue--slot插槽的使用方式的主要内容，如果未能解决你的问题，请参考以下文章