Vue中插槽指令
2024-10-21 07:43:34
08.29自我总结
Vue中插槽指令
意义
- 就是在组件里留着差值方便
后续组件内容新增
- 而且由于插件是写在父级中数据可以直接父级中传输而不需要传子再传父有些情况会减少写代码量
示例
<div id="app">
<msg-tag> //4.创建个组件
<template v-slot:插槽的名称> //根据插槽的名称创建插槽
//插槽里面的内容
</template>
</msg-tag>
</div>
<script src="vue.js"></script>
<script>
//1.创建组件
let msgTag = {
template: `
<li>
<slot name="插槽的名称"></slot> //3.设置插槽的内容
<span>1111111</span>
</li>
`,
};
new Vue({
el: '#app',
components: {
msgTag //2.注册组件
}
})
</script>
几种插槽特殊情况
情况一:组件里没有设置插件名称
,页面中插槽中写了插槽名称
结果页面中插槽不会被渲染
情况二:组件里有设置插件名称
,页面中插槽中没写了插槽名称
结果页面中插槽不会被渲染
情况三:组件里没有设置插件名称
,页面中插槽中没写了插槽名称
结果页面中插槽会被渲染
情况四:组件里只写了一个插槽
,页面中写了多个插槽中没写了插槽名称
结果页面中插槽会被渲染而且依次排列显示插槽的位置
情况五:组件里只写了N个插槽
,页面中写了n个插槽中没写了插槽名称
结果页面中插槽会被渲染而且依次排列显示插槽的位置,且每个插槽位置都显示n个,前提名字要一一对应
最新文章
- mysql缓存
- Spring 事务处理
- 開博客了, 因為搞Delphi 開發的關於Delphi學習
- 2013级软件工程GitHub账号信息
- MEF(Managed Extensibility Framework) 微软平台插件化开发
- Android百度地图开发(二)地图覆盖物
- Java设计模式10:设计模式之 值对象
- (转)matlab 字符串处理函数
- Jquery表单与表格的运用
- c语言面试题(感觉比较好的题目)
- iis 隐藏 banner
- Math 对象 识记
- CSS3实现一束光划过图片、和文字特效
- js判断手机端
- Linux设置SSH登录(SecureCrt)
- 20 由属性查询学习到的ArcMap、javaScripts API相关操作
- 基于iview 封装一个vue 表格分页组件
- c# Tuple新特性
- datatable的点击事件
- django创建app、在视图函数及url中使用参数、url命名、通过redirect实现网页路径跳转
热门文章
- 前端项目自动化构建工具——Webpack入门教程
- 【学习笔记】第二章 python安全编程基础---python爬虫基础(urllib)
- 字符串之————图文讲解字符串排序(LSD、MSD)
- (三)Spring 高级装配 bean的作用域@Scope
- 使用mkfs.ext4格式化大容量磁盘
- invalid comparison: java.util.ArrayList and java.lang.String解决
- java 加密解密方式
- 正睿国庆DAY2动态规划专题
- gulp简单使用
- Python基础(十八)