-
单个插槽
父组件<template> <div id="app"> <hello-world> <!--倘若子组件里没有slot,那这段html代码会被弃用--> <div>我是父组件里得内容,我要在子组件的slot中展示出来</div> <br> </hello-world> </div> </template> <script> import HelloWorld from './components/HelloWorld' export default { data(){ return {} }, components:{ HelloWorld } } </script> <style> </style>
子组件
<template> <div class="chind"> <div> <slot></slot> </div> </div> </template> <script> export default {} </script> <style scoped> </style>
-
具名插槽
父组件<template> <div id="app"> <hello-world :slotitems="items"> <div>假发</div> <div slot="test">我是父组件里得内容,我要在子组件的slot中展示出来</div> </hello-world> </div> </template> <script> import HelloWorld from './components/HelloWorld' export default { data(){ return { } }, components:{ HelloWorld } } </script> <style> </style>
子组件
<template> <div class="chind"> <br/> <div> <slot></slot><!--“假发”将会被展示在这个没有名字的slot中--> <slot name="test"></slot> </div> </div> </template> <script> export default {} </script> <style scoped> </style>
-
插槽作用域
父组件<template> <div id="app"> <hello-world :slotitems="items"> <div slot="test">我是父组件里得内容,我要在子组件的slot中展示出来</div> <br> <template slot-scope="props"> <span>{{ props.cname }}</span> <span>{{ props.text }}</span> <span>{{ props.age }}</span> </template> </hello-world> </div> </template> <script> import HelloWorld from './components/HelloWorld' export default { data(){ return { items:{text:'插槽练习' , cname:'张三' } } }, components:{ HelloWorld } } </script> <style> </style>
子组件
<template> <div class="chind"> <div> <slot name="test"></slot> <slot :cname="slotitems.cname"></slot> <slot :text="slotitems.text"></slot> <slot age="18"></slot> </div> </div> </template> <script> export default { props: ['slotitems'],//主要是通过props来接受父组件传过来的值 } </script> <style scoped> </style>
注:适用于组件重用但是又有不相同的地方