Vue-slot插槽的所有使用方法
2023-02-18 16:30:18 时间
1.插槽的基本使用
<div id="app">
<cpn><button>按钮</button></cpn>
</div>
//定义一个组件
<template id="cpn">
<div>
<h2>我是组件</h2>
<p>我是内容</p>
<slot></slot>
</div>
</template>
const vm = new Vue({
el: '#app',
//注册组件
components: {
cpn: {
template: '#cpn'
}
}
});
2.插槽的默认值
<div id="app">
<cpn></cpn>
</div>
<template id="cpn">
<div>
<h2>我是组件</h2>
<p>我是内容</p>
<slot><span>我是默认值</span></slot>
</div>
</template>
const vm = new Vue({
el: '#app',
components: {
cpn: {
template: '#cpn'
}
}
});
3.多个值同时放入到组件进行替换时,一起作为替换元素
<div id="app">
<cpn>
<p>替换1</p>
<i>替换2</i>
</cpn>
</div>
<template id="cpn">
<div>
<h2>我是组件</h2>
<p>我是内容</p>
<slot><button>按钮</button></slot>
</div>
</template>
const vm = new Vue({
el: '#app',
components: {
cpn: {
template: '#cpn'
}
}
});
4.具名插槽的使用
通过给插槽设置name属性准确找到需要替换的插槽
<div id="app">
<cpn><span slot="center">标题</span></cpn>
</div>
<template id="cpn">
<div>
<slot name="left"><span>左边</span></slot>
<slot name="center"><span>中间</span></slot>
<slot name="right"><span>右边</span></slot>
</div>
</template>
const vm = new Vue({
el: '#app',
components: {
cpn: {
template: '#cpn'
}
}
});
5.作用域插槽
在父组件中无法访问到子组件中的数据,需要展示的数据还是子组件中的数据,但是展示的方式不同;通过设置slot-scope属性可以获取到子组件模板插槽中绑定的数据。
<div id="app">
<cpn>
<!-- 获取子组件中的数据 -->
<!-- vue2.5.x版本以下必须用template包裹 版本以上用div也可以 -->
<div slot-scope="slot">
<span v-for="item in slot.num">{{item}}- </span>
</div>
</cpn>
</div>
<template id="cpn">
<div>
<slot :num="numArr">
<ul>
<li v-for="item in numArr">{{item}}</li>
</ul>
</slot>
</div>
</template>
const vm = new Vue({
el: '#app',
components: {
cpn: {
template: '#cpn',
data() {
return {
numArr: [1,2,3,4,5,6,7]
}
}
}
}
});
相关文章
- 关于产品生命周期的几点思考
- 你需药 我来帮!
- 【有奖调研】填问卷,抽防水U盘!
- 将云原生进行到底:腾讯百万级别容器云平台实践揭秘
- Wannacry 蠕虫勒索(比特币)病毒补丁与免疫工具
- 树莓派安装 HAProxy 实现高可用高负载SS服务器线路负载均衡
- 树莓派香橙派无线播放,实现DLNA与AirPlay协议无线音箱
- web开发者在发布你的作品前需要考虑的技术细节
- 也谈代码风格
- 在mac上使用adb与fastboot
- adb,fastboot常用命令及刷机技巧
- 修复typecho删除分类后统计文章数的错误
- 使用Let's Encrypt -- 免费的https证书
- 为你的网站开启ssl支持
- 推荐几个chrome必装插件
- 2022PyCharm激活码(2022PyCharm最新激活码)2022PyCharm激活码
- 新装虚拟机记录一下
- 记一次centos最小安装
- centos7.0 的最小化安装
- PYCHARM快捷键