<>插槽

1.什么插槽
插槽也成为内容分发 用slot这个内置组件
2.插槽是干什么的
在子组件中来显示父组件中的数据
3.插槽怎么用
4.在子组件中用括起来一个区域
5.在父组件的子组件标签中给插槽传递数据,如果父组件不传输数据那6.么直接显示标签中的数据
7.插槽的分类
插槽可以分为三类 默认插槽 具名插槽 作用域插槽
默认插槽
只要有位置 就会显示父组件传递来的数据
具名插槽
给slot标签起名 然后在父组件传递数据的时候根据名字查找就行

示例:子组件
<template> <div> <h2> <slot name="one"> 这个我子组件预留出来的位置 {{title}} </slot> </h2> <
p>我的内容</p> <section> 插槽的内容 <slot name="two"></slot> </section> </div> </template
> <script> export default { data(){ return{ title:'谁' } } } </script>
父组件
<template> <div id="app"> <!-- 学生列表 --> <List> <template v-slot:one> <p>
这是我的学生数据</p> <h3>{{name}}</h3> </template> <template> 这是列表的标题呢 </template> </
List> <!-- 教室列表 --> <List></List> </div> </template> <script> import List from
"@/components/List" export default { components:{List} , data(){ return{ name:
"hello" } } } </script> <style></style>
作用域插槽
1.在子组件中给slot绑定一个属性 挂载要传输的变量 :属性名=“变量”

2.在父组件中通过 v-slot:名=“suibian”

3.suibian.属性名来访问子组件传过来的数据

示例:子组件
<template> <div> <h2> <slot name="one" :objuser="obj"> {{obj.firstname}} </slot
> </h2> <p>我的内容</p> <section> 插槽的内容 <slot name="two" :stuobj="stu"></slot> </
section> </div> </template> <script> export default { data(){ return{ obj:{
firstname:"张",lastname:"三"}, stu:{username:'张三',age:20} } } } </script>
父组件
<template> <div id="app"> <!-- 学生列表 --> <List> <template v-slot:one="suibian">
<p>这是我的学生数据</p> <h3>{{suibian.objuser.lastname}}</h3> </template> <template
v-slot:two="suibian"> {{suibian.stuobj.age}} </template> </List> <!-- 教室列表 --> <
List></List> </div> </template> <script> import List from "@/components/List"
export default { components:{List} , data(){ return{ name:"hello" } } } </script
> <style></style>

技术
今日推荐
阅读数 20
阅读数 13
阅读数 10
阅读数 9
友情链接
码工具
Toolsou
API参考文档
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:ixiaoyang8@qq.com
QQ群:766591547
关注微信