- 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' })代码中有解释了。。。
- 作用域插槽
- 上代码
-
<body> <div class="app"> <child> <template slot-scope="props"> <span>{{ props }}</span> </template> </child> </div> </body> <template id="tpl"> <div> <!-- 子组件做循环或者子组件中部分结构 需要由外部传入的时候使用作用域插槽 --> <!-- 这里循环的每一项都给ite 然后父组件中接收？？？ --> <slot v-for="item of list" :ite="item"></slot> </div> </template> <script> Vue.component('child',{ template:'#tpl', data(){ return{ list:[1,2,3,4] } } }) const app = new Vue({ el:'.app' }) </script>