vue之插槽-slot
1.背景
2.slot简单使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>--> <script src="../js/vue.js"></script> </head> <body> <h2>插槽slot简单使用</h2> <pre> 1.定义:通俗的来说就是html中的变量,你可以理解为html替换,他要实现的功能非常类型之前我们使用jquery的 $("#id").html('要替换的内容') 2.官方的定义大家自己百度 需求: 1. 定义一个组件; 2.组件内部的内容可以根据使用者替换 </pre> <hr> <h2>案例如下:</h2> <div id="app"> <c-child1></c-child1> ------------------------- <c-child1> <div>父类替换你的值</div> </c-child1> </div> <!--子组件模板1--> <template id="child1id"> <div> 我是一个子组件 <div> <slot>这是我的默认内容,使用者可以替换</slot> </div> </div> </template> <script> let app = new Vue({ el: '#app', // 组件 components: { 'c-child1': { template: '#child1id', } } }) </script> </body> </html>
3.具名插槽
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>--> <script src="../js/vue.js"></script> </head> <body> <h2>插槽slot-具名插槽</h2> <pre> 1.当多个插槽时,我们替换的内容到底替换那个插槽呢,这时候我们就需要给插槽去一个名字 2.可以利用slot 元素的一个特殊的特性：name来定义具名插槽 需求: 1. 定义一个组件; 2. 组件内3个插槽,分别为网页的头部、主体、脚部 </pre> <hr> <h2>案例如下:</h2> <div id="app"> <c-child1> <div slot="header">填充头部</div> <div slot="body">填充主体</div> <div slot="footer">填充脚部</div> </c-child1> </div> <!--子组件模板1--> <template id="child1id"> <div> <div> <slot name="header">头部</slot> <slot name="body">主体</slot> <slot name="footer">脚部</slot> </div> </div> </template> <script> let app = new Vue({ el: '#app', // 组件 components: { 'c-child1': { template: '#child1id', } } }) </script> </body> </html>
4.父组件控制插槽中的数据显示方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>--> <script src="../js/vue.js"></script> </head> <body> <h2>插槽-实现子组件提供数据-父组件提供展示样式</h2> <pre> 需求: 1. 提供一个子组件含插槽和一组数据; 2. 父组件控制数据在插槽中的显示方式; 备注: 实际生产中子组件获取到数据后,可能要在不同环境的父组件中做不同的展示 </pre> <hr> <h2>案例如下:</h2> <div id="app"> 展示方式一: <c-child1> <!-- slotProps2 可以自定义--> <template slot-scope="slotProps2"> <ul> <!-- slotProps2.data 取出插槽绑定在上面的data--> <li v-for="item in slotProps2.data">{{item}}</li> </ul> </template> </c-child1> ----------------------- <br> 展示方式二: <c-child1> <template slot-scope="slotProps2"> <ul> <li v-for="(item,index) in slotProps2.data">{{index+1}}-{{item}}</li> </ul> </template> </c-child1> </div> <!--子组件模板1--> <template id="child1id"> <div> <!-- 这里的data不乱取名字,只能是data--> <slot :data="orderList"></slot> </div> </template> <script> let app = new Vue({ el: '#app', // 组件 components: { 'c-child1': { template: '#child1id', data() { return { orderList: ['书籍', '水果', '键盘', '水杯'] } } } } }) </script> </body> </html>
完美!
