1.为什么要用插槽
- usb等插槽的目的是让我们原来的设备&＃xff0c;具有更多的扩展性。
- 同样的&＃xff0c;组件的插槽&＃xff0c;也是为了我们封装的组件更加具有扩展性&＃xff0c;让使用者可以决定组件的内部到底展示什么
比如说&＃xff0c;如下的需求&＃xff1a;
当模板复用的时候。我第一次用的时候&＃xff0c;下边想让他显示一个按钮&＃xff0c;第二次用的时候&＃xff0c;想让他显示一个 p 标签&＃xff0c;所以&＃xff0c;这种情况下。我们就把最后一行&＃xff0c;给他搞成活的&＃xff0c;这样&＃xff0c;我们就灵活的使用组件进行开发了。
2.插槽的基本使用
其实也简单&＃xff0c;只要添加一个 slot 标签就可以了
<template><div><h1>我是标题h1><p>我是组件。哈哈哈p><slot>slot>div>template>
使用插槽的时候&＃xff0c;直接把标签写在里面就好了
<body><div id&＃61;&＃39;app&＃39;><cpn><button>点击按钮button>cpn><cpn><p>你好吗&＃xff1f;p>cpn><cpn>cpn>div><template id&＃61;"cpn"><div><h1>我是标题h1><p>你好p><slot>slot>div>template><script src&＃61;"https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script><script>const cpn &＃61; {template: &＃39;#cpn&＃39;,}const app &＃61; new Vue({el: &＃39;#app&＃39;,data: {},components: {cpn}})script>
body>
效果图&＃xff1a;
为了避免插槽里面的东西多有重复&＃xff0c;可以给插槽设置默认值
<template id&＃61;"cpn"><div><h1>我是标题h1><p>你好p><slot><h2>设置的默认值h2>slot>div>template>
3.具名插槽
当有多个组件的插槽的时候&＃xff0c;具体应该更换哪一个插槽&＃xff01;
<body><div id&＃61;&＃39;app&＃39;><cpn><span slot&＃61;"center">标题span>cpn>div><template id&＃61;"cpn"><div><slot name&＃61;"left"><span>左边span>slot><slot name&＃61;"center"><span>中间span>slot><slot name&＃61;"right"><span>右边span>slot>div>template><script src&＃61;"https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script><script>const cpn &＃61; {template: &＃39;#cpn&＃39;,}const app &＃61; new Vue({el: &＃39;#app&＃39;,data: {},components: {cpn}})script>
body>
京公网安备 11010802041100号