我要评论slot
翻译为插槽:
1 在生活中很多地方都有插槽,电脑的USB插槽,插板当中的电源插槽。
2 插槽的目的是让我们原来的设备具备更多的扩展性。
比如电脑的USB我们可以插入U盘、硬盘、手机、音响、键盘、鼠标等等。
组件的插槽
组件的插槽也是为了让我们封装的组件更加具有扩展性。
让使用者可以决定组件内部的一些内容到底展示什么。
1 插槽的基本使用
2 插槽的默认值 -------->一个东西出现多次可用默认来写
3 当多个元素放一个组件中则都会显示
<div id="app">
<cpm><button>按钮1</button></cpm> //除了template 又添加了button
<cpm></cpm> //就是template里面的
<cpm><p>我是p标签 </p></cpm>
</div>
</body>
<script>
const app=new Vue({
el:"#app",
data:{},
methods:{
},
components:{
cpm:{
template:`<div>
<h1>我是标题1</h1>
<h1>我是标题2</h1>
<slot></slot>
</div>`,
}
}
})
具名插槽
下面是一个导航栏，针对不同的导航栏，布局不一样，所以用具名插槽
左中右都会替换成具体的一个部分
（比如京东页面有很多 搜索框 但是每个搜索框都不尽相同，有需要改动的地方）
<div id="app">
<cpm></cpm>
<cpm><button slot="left">返回</button></cpm>
<cpm><span slot="center">首页</span></cpm>
</div>
</body>
<script>
const app=new Vue({
el:"#app",
data:{},
methods:{
},
components:{
cpm:{
template:`<div>
<slot name="left">左边</slot>
<slot name="center">中间</slot>
<slot name="right">右边</slot>
</div>`
}
}
})
作用域插槽后面续更，有点难！
本文地址：https://blog.csdn.net/lillian14/article/details/109248552
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论