版权声明:转发博客 请注明出处 否则必究 https://blog.csdn.net/lucky541788/article/details/82762718
匿名插槽
<div id="enjoy">
<my-slot>
<img src="../images/fashion-001.jpg" alt="" width="100">
<img src="../images/fashion-003.jpg" alt="" width="100">
<h4>hello</h4>
</my-slot>
</div>
<template id="my_slot">
<div id="panel">
<h2 class="panel-header">插槽的头部</h2>
<!--预留一个插槽-->
<!--slot可以代替任何一个标签,里面可以放任意个标签,默认显示提示的内容-->
<slot>可以代替任何一个标签,默认显示提示的内容</slot>
<footer>插槽的底部</footer>
</div>
</template>
{
Vue.component('my-slot',{
template:"#my_slot"
});
new Vue({
el:'#enjoy',
})
}
实名插槽
<div id="enjoy">
<my-computer>
<!--slot固定了位置,不会随意改变-->
<div slot="cpu">inter core i8</div>
<img slot="hard-drive" src="../images/fashion-001.jpg" width="100" style="display: block;">
<h2 slot="gpu">hello world</h2>
<a href="#" slot="memory">hello world</a>
</my-computer>
</div>
<template id="my_computer">
<div id="main">
<slot name="cpu">这里是插CPU的</slot>
<slot name="gpu">这里是插gpu的</slot>
<slot name="memory">这里是插内存条的</slot>
<slot name="hard-drive">这里是插硬盘的</slot>
</div>
</template>
{
Vue.component('my-computer',{
template:'#my_computer'
});
new Vue({
el:'#enjoy',
})
}