前端【VUE】08-vue【插槽】【默认插槽】【具名插槽】【作用域插槽】
1、默认插槽
默认插槽对应的插槽的名字为default
1、组件目录下
components/MyDialog.vue
1 <template> 2 <div class="dialog"> 3 <div class="dialog-header"> 4 <h3>友情提示</h3> 5 <span class="close">✖️</span> 6 </div> 7 <div class="dialog-content"> 8 <!-- 默认插槽, 没有指定名字的插槽 --> 9 <slot></slot> 10 </div> 11 <div class="dialog-footer"> 12 <button>取消</button> 13 <button>确认</button> 14 </div> 15 </div> 16 </template> 17 18 <script> 19 export default { 20 data () { 21 return {} 22 } 23 } 24 </script> 25 26 <style scoped> 27 * { 28 margin: 0; 29 padding: 0; 30 } 31 .dialog { 32 width: 470px; 33 height: 230px; 34 padding: 0 25px; 35 background-color: #ffffff; 36 margin: 40px; 37 border-radius: 5px; 38 } 39 .dialog-header { 40 height: 70px; 41 line-height: 70px; 42 font-size: 20px; 43 border-bottom: 1px solid #ccc; 44 position: relative; 45 } 46 .dialog-header .close { 47 position: absolute; 48 right: 0px; 49 top: 0px; 50 cursor: pointer; 51 } 52 .dialog-content { 53 height: 80px; 54 font-size: 18px; 55 padding: 15px 0; 56 } 57 .dialog-footer { 58 display: flex; 59 justify-content: flex-end; 60 } 61 .dialog-footer button { 62 width: 65px; 63 height: 35px; 64 background-color: #ffffff; 65 border: 1px solid #e1e3e9; 66 cursor: pointer; 67 outline: none; 68 margin-left: 10px; 69 border-radius: 3px; 70 } 71 .dialog-footer button:last-child { 72 background-color: #007acc; 73 color: #fff; 74 } 75 </style>
2、根组件App.vue中使用上面的组件
1 <template> 2 <div> 3 <MyDialog> 4 <!-- 给默认插槽设置内容 --> 5 <!-- 1、可以是一段话 --> 6 你让确认要退出本系统嘛? 7 <!-- 2、也可以根据插槽的位置, 设置一段html代码 --> 8 </MyDialog> 9 </div> 10 </template> 11 12 <script> 13 import MyDialog from './components/MyDialog.vue' 14 export default { 15 data () { 16 return { 17 18 } 19 }, 20 components: { 21 MyDialog 22 } 23 } 24 </script> 25 26 <style> 27 body { 28 background-color: #b3b3b3; 29 } 30 </style>
2、插槽（默认值）-后备内容
3、具名插槽
具名插槽需要配合template标签来使用，如果是默认插槽，则可以不写template
具名插槽语法
具名插槽语法简化
4、作用域插槽
1、组件components/MyTable.vue
1 <template> 2 <div> 3 <p> 4 <!-- 定义插槽, 通过插槽给父组件传值, 这个值可以是双向绑定的变量 --> 5 <!-- <slot username="张三" age="30"></slot> --> 6 <slot :username="username" :age="age"></slot> 7 </p> 8 </div> 9 </template> 10 11 <script> 12 export default { 13 props: ['data'], 14 data() { 15 return { 16 username: "张三", 17 age: 20 18 } 19 } 20 } 21 </script> 22 <style scoped> 23 </style>
2、在根组件App.vue使用上面的组件
1 <template> 2 <div> 3 <!-- 组件传值, 父传子, 通过属性传递, 定义属性名为data --> 4 <!-- 子组件通过props接收 --> 5 <MyTable :data="list"> 6 <!-- 通过插槽作用域给父传值, 插槽中定义的所有属性都会被包装成一个对象, 赋值给这个obj, 这个名字自定义--> 7 <template #default="obj"> 8 我是内容 {{ obj.username + obj.age}} 9 </template> 10 11 <!-- 通过{username} 直接结构插槽传过来的对象中的username --> 12 <!-- <template #default="{ username }"> 13 我是内容 {{ username }} 14 </template> --> 15 </MyTable> 16 </div> 17 </template> 18 19 <script> 20 import MyTable from './components/MyTable.vue' 21 export default { 22 data () { 23 return { 24 list: [ 25 { id: 1, name: '张小花', age: 18 }, 26 { id: 2, name: '孙大明', age: 19 }, 27 { id: 3, name: '刘德忠', age: 17 } 28 ] 29 } 30 }, 31 components: { 32 MyTable 33 } 34 } 35 </script>
