Vue组件插槽的使用
2024-09-01
44
1. 什么是插槽
插槽的作用: 让封装的组件更加具有扩展性
插槽就是子组件提供给父组件使用的一个占位符,用 <slot></slot>
表示,父组件可以在这个占位符中填充任何模板代码,如:html、组件等,填充的内容会替换到子组件中的 <slot></slot>
标签
2. 基础使用
<div id="app">
<parent>
12323
</parent>
</div>
<script>
var par = {
template: `<div>hello <slot></slot></div>`
}
let vm = new Vue({
el: '#app',
components: {
parent: par
}
})
</script>
3. 具名插槽
v-slot:
可以简写为 #
更新于:2个月前<div id="app">
<layout>
<template v-slot:header>
123
</template>
<template #main>
456
</template>
<template #footer>
789
</template>
</layout>
</div>
<script>
var layout = {
template: `
<div>hello
<header>
<slot name="header"></slot>
</header>
<main>
<slot name="main"></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
`
}
let vm = new Vue({
el: '#app',
components: {
layout: layout
}
})
</script>
赞一波!1
相关文章
- 源码多多进鱼带VUE源码任务悬赏源码安装说明文档
- 什么是VoidZero?Vue和Vite之父尤雨溪成立的技术公司
- Vue 3.5引入新特性 还有与SSR相关的改进
- fastadmin 动态下拉组件 SelectPage
- Vue CLI 2 脚手架 TabBar 组件封装
- Vue 网络请求模块封装 (axios)
- Vue 的认识、特点介绍、安装方式
- vue-router 的基本使用
- 基于Vue的免费开源admin管理后台框架
- vue cli 项目启动 HBuilderX 编辑器的使用
- vue cli 中的 import 和 export
- Vue cli4 图片地址引入的几种方式
- vue跳转页面的方法
- Vue CLI 脚手架简介及安装
- 自定义事件子组件与父组件通信
- Vue 创建项目及目录介绍
- Vue组件之动态组件
- Vue 组件介绍及使用
- Vue组件的data必须是一个函数、单个根元素、局部组件
- Vue 父子组件通信传值(子组件中使用父组件中的数据)
文章评论
评论问答