Vue2-Slot插槽使用
2024-10-06 21:43:31
Slot插槽
- 父组件向子组件传递
- 父组件将内容分发到子组件
- slot插槽的值只读，不能在子组件中修改
- slot插槽也可以作为组件之间的通信方式
默认插槽
父组件中：使用Son组件
<template>
<Son>
<ul> //子组件如果不定义插槽 这里面的ul不起作用
<li>我</li>
<li>爱</li>
<li>你</li>
</ul>
</Son>
</template>
子组件中：
<template>
<div>
<!-- 定义插槽 -->
<slot>父组件中没有内容就显示这句话...</slot>
</div>
</template>
具名插槽
#两种方式
`注意 v-slot：简写为 # 且 具名插槽需要用 template 包裹（组件不用 template 包裹）`
父组件中：使用Son组件
<template>
<Son>
<h1 slot="demo1">迷死他<h2>
<ul slot="demo2">
<li>你</li>
<li>爱</li>
<li>我</li>
</ul>
</Son>
</template>
//第二种写法 必须要加上template标签
<template v-slot:demo2>
<ul>
<li>我</li>
<li>爱</li>
<li>你</li>
</ul>
</template>
子组件中：
<template>
<div>
<!-- 定义插槽 -->
<slot name="demo1">父组件中没有内容就显示这句话...</slot>
<slot name="demo2">父组件中没有内容就显示这句话...</slot>
</div>
</template>
作用域插槽
#数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。(son组件在father组件中使用，但是数据来源是Son组件本身，这时就需要在Son组件中用作用域插槽将数据传输给插槽的使用者)
`父组件中：`
方法一：
<Son>
<template scope="formSon">
<!-- dataSource来子组件 -->
<ul>
<li v-for="(k,index) in dataSource" :key="index">{{k}}</li>
</ul>
</template>
</Son>
方法二：
<Son>//第二种写法
<template slot-scope="formSon">
<!-- 生成的是h4标题 -->
<h4 v-for="(k,index) in dataSource" :key="index">{{k}}</h4>
</template>
</Son>
`子组件中：`
<template>
<div>
<slot :dataSource="dataSource"></slot>
</div>
</template>
<script>
export default {
//数据在子组件自身
data() {
return {
dataSource:['lht','lht1','lht2','lht3']
}
},
}
</script>
应用场景示例
template中的插槽---具名插槽
#父组件中：father.vue
#导入子组件
import Son from './son.vue'
<template>
<Son>
<template v-slot:www>
<div>......</div>
//div中可以用来取父组件的值，存放到插槽再分发给子组件
</template>
</Son>
</template>
#子组件中 son.vue 使用父组件中的插槽
<slot name="www"></slot>
//渲染后就出现父组件的结构内容
最新文章
- mui学习记录
- LDAP 中 CN, OU, DC 的含义
- Spark 常用参数及调优
- python3.x 学习心得
- 查看ssh服务开启状态
- Android笔记（二）：从savedIndstanceState发散
- （转）使用scp命令在linux操作系统之间传递文件
- node.js安装以及相关配置
- poj 3764 The xor-longest Path(字典树)
- Flask-WTF CSRF 保护P3
- Maven02——回顾、整合ssh框架、分模块开发、私服
- 敏捷冲刺每日报告--day1
- vue-router 组件实例被复用问题
- [SDOI2009]HH的项链
- Spring Cloud Greenwich 正式发布，Hystrix 即将寿终正寝。。
- three.js全景漫游实践
- IDE中使用System.getProperty()获取一些属性
- 安卓编程资源文件string中对占位符的使用详解
- MySql：SELECT 语句（三） WHERE 指定查询条件
- 对于windows 10使用感受