©2020-2024 ioDraw All rights reserved,
Privacy Policy
<>插槽
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>