vue插槽与作用域插槽的演示(前端网备份)
参考https://www.cnblogs.com/ccyinghua/p/7878187.html
然后近一步解释一下作用域插槽
父级组件:
<list2Son :msg="list" @father="change"> <h1 slot="header">这里可能是一个页面标题</h1> <p>22</p> <p slot="footer">这里有一些联系信息</p> <template slot-scope="props"> <ul> <li v-for="(a,index) in props.text" :key="index"> <!-- 若不加任何判断,整个template中的标签都会替换为定义时的slot --> <h4>{{a.name}}</h4> <h5>{{a.age}}</h5> <!-- 技巧就在于通过a拿到的数据选择性地渲染标签,即修改单个slot对应的作用域范围 --> <span v-if="a.single">我是单身</span> <span v-if="a.stu">我是学生</span> <span v-if="!a.single">我不是单身</span> <span v-if="!a.stu">我不是学生</span> </li> </ul> </template> </list2Son> list: [ { name: "tate", age: 26, single: true, stu: false }, { name: "kevin", age: 23, single: true, stu: true }, { name: "harden", age: 28, single: false, stu: false }, { name: "Jimmy", age: 29, single: false, stu: true } ]
子组件:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<template> <div class="wrapper"> <!-- 我是组件2的儿子 --> <!-- <div>{{msg}}</div> --> <slot :text="msg"></slot> <header> <slot name="header" say="seeyou">我是插槽头</slot> </header> <main> <slot>我是插槽身</slot> </main> <footer> <slot name="footer">我是插槽脚</slot> </footer> </div> </template> <script> export default { components:{}, props:["msg"], data(){ return { father:"我是list2_son子组件返回给list2父组件的值", arr:[ {name:'vue.js'}, {name:'html权威'}, {name:'css3'}, ] } }, watch:{}, computed:{}, methods:{}, created(){ this.$emit("father",this.father) }, mounted(){} } </script> <style scoped> .wrapper{ color: cadetblue } </style>
渲染的结果就是
tate 26 我是单身我不是学生 kevin 23 我是单身我是学生 harden 28 我不是单身我不是学生 Jimmy 29 我是学生我不是单身 这里可能是一个页面标题 这里有一些联系信息 我是list2_son子组件返回给list2父组件的值
普通插槽解释:普通插槽在意的是你摆放在子组件的上下文位置
总结:作用域插槽的实用场景为父组件内调用不同显示形式的模板,就可以通过这种传参给子组件,然后子组件把参数返回给父组件在父组件页面操控子组件显示形式