Vue插槽
如果只预留有名插槽，如果不带名插入或名称错误插入，会无法插入。
如果只预留无名插槽，带名无法插入
vue匿名插槽
<body> <div id="app"> <my_slot> <img src="img/123.jpg" width="200px" /> <p>插槽A</p> </my_slot> </div> <template id="mytest"> <div> <p>插槽头部</p> <slot>自定义插槽</slot> //在template中<slot>标签代表自定义插槽，可以自定义编辑 <footer>插槽尾部</footer> </div> </template> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> Vue.component("my_slot",{ template:"#mytest" }); new Vue({ el:"#app" }); </script> </body> |
vue有名插槽
<body> <div id="app"> <space> <p slot='cpu'>inter i9 88</p> <img src="img/123.jpg" width="200px" slot='gpu' /> <input type="color" slot="disk" /> </space> </div>
<template id="space"> <div> <slot name='cpu'>cpu区域</slot> <slot name='gpu'>gpu区域</slot> <slot name='disk'>disk区域</slot> </div>
</template> <script src="js/vue.js"></script> <script> Vue.component("space", { template: '#space' });
new Vue({ el: "#app" }); </script> </body> |
