Vue-slot插槽的所有使用方法
2023-02-18 16:35:59 时间
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]
}
}
}
}
});
相关文章
- NFT 的过去、现在和未来
- Vue实战的几个技巧
- Vue响应式系统原理
- Vue响应式依赖收集原理分析
- Webpack高级配置实战
- Webpack构建速度优化指南
- Webpack最佳实践指南
- FLStudio2023最新中文版水果编曲软件V21
- Flutter混编工程之打通纹理之路
- 说回 TheRouter
- TheRouter 的跨模块依赖注入实现原理
- 什么是相位噪声:相位抖动
- adobe全家桶2023下载正式版全系列
- 忙里偷闲IdleHandler
- kotlin修炼指南8—集合中的高阶函数
- kotlin修炼指南9-Sequence的秘密
- JetBrains 远程开发的使用和心得
- APP动态路由的设计与实践
- 微软发布“Raspberry Robin”恶意软件警告
- 警告:新的攻击活动利用了 MICROSOFT EXCHANGE SERVER 上的一个新的 0-DAY RCE 漏洞