vue使用插槽分发内容slot的用法
将父组件的内容放到子组件指定的位置叫做内容分发solt
一、单个插槽
父组件app.vue
<template>
<div id="app">
<test-slot>
<span>我是父组件里的文字,但是我要被放到子组件里</span>
</test-slot>
</div>
</template> <script>
import testSlot from './components/testSlot'
export default {
components:{
testSlot
}
}
</script>
子组件testSlot.vue
<h3>test-slot</h3>
//父组件里的span会替换掉slot所以这里的123是看不见的
//如果父组件在使用子组件testSlot的时候不在里面加内容则这里的slot 123 会显示出来
<slot></slot>
二、多个插槽也叫具名插槽
具名插槽就是将某个名字的内容插到子组件对应名字里面去
三、作用域插槽(将子组件的值传到父组件供使用)
父组件app.vue;soltModel是子组件
<soltModel>
1、首先父组件要定义一个 v-slot 这个属性名字 slotProps 自己起
2、子组件中 定义一个 :slotDate="website" slotDate是自己写的名字,website就是子组件的数据
3、这样父组件中:通过 slotProps.slotDate 就能拿到子组件中的数据
4、父组件中:要在组件中 利用 template 来写
<template v-slot="slotProps">
{{slotProps.slotDate.id}}
</template>
</soltModel>
子组件soltModel.vue
<template>
<h2>
<slot :slotDate="website">{{website.name}}</slot>
</h2>
</template>
<script>
export default {
data() {
return {
website:{
name: '我是子组件的数据',
id:
}
}
}
}
</script>
这样,父组件就访问到了子组件的数据
vue路由中的mate
在项目中肯定有这样的需求,那就是在某个页面的时候,顶部展示 现在当前的页面路径,如下图:
这个时候便用到了mate;
首先出现这个肯定是相对应不同的页面,也就是说对应不同的路由,我们在定义路由的时候:如下
复制代码
routes: [
{
path: '/',
name: 'login',
component: login
},{
path: '/Page',
name: 'Page',
component: Page,
children: [
{
path: '/UserList',
name: 'UserList',
component: UserList,
meta: ['数据列表', '用户列表'],
},{
path: '/OrderList',
name: 'OrderList',
component: OrderList,
meta: ['数据列表', '订单列表']
}
]
}
]
其次在 当前需要展示页面路径的地方:
<el-breadcrumb-item v-for="(item, index) in $route.meta" key="index">{{item}}</el-breadcrumb-item>
vue使用插槽分发内容slot的用法的更多相关文章
- vue组件-使用插槽分发内容(slot)
slot--使用插槽分发内容(位置.槽口:作用: 占个位置) 官网API: https://cn.vuejs.org/v2/guide/components.html#使用插槽分发内容 使用组件时,有 ...
- vue 通过插槽分发内容
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- vue2.0使用slot插槽分发内容
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- Vue组件-使用插槽分发内容
在使用组件时,我们常常要像这样组合它们: <app> <app-header></app-header> <app-footer></app-fo ...
- Vue:实践学习笔记(6)——使用SLOT分发内容
Vue:实践学习笔记(6)——使用SLOT分发内容 Slot Slot是什么 Slot是父子组件的通讯方式,可以将父组件的内容显示到子组件之中. 使用SLOT前 比如我在定义组件的时候,在里面输入了X ...
- 通过UI库深入了解Vue的插槽的使用技巧
Vue官网对于插槽的介绍比较简略,插槽本身也比较"烧脑",很容易看晕,我就一直没看懂,直到 使用了element-plus的组件的插槽. 其实我们可以换一个角度来理解插槽,就会豁然 ...
- Vue结合slot插槽分发父组件内容实现高度复用、更加灵活的dialog组件
之前写过一篇关于vue实现dialog会话框组件的文章(http://www.cnblogs.com/fozero/p/8546883.html)[http://www.cnblogs.com/foz ...
- 使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件
写在前面 之前写过一篇关于vue实现dialog会话框组件的文章http://www.cnblogs.com/fozero/p/8546883.html, 讲到了如何实现一个vue对话框组件,其中涉及 ...
- vue组件详解(四)——使用slot分发内容
一.什么是slot 在使用组件时,我们常常要像这样组合它们: <app> <app-header></app-header> <app-footer>& ...
随机推荐
- 清北学堂模拟赛d3t1 a
[问题描述]你是能看到第一题的friends呢.——hja 怎么快速记单词呢?也许把单词分类再记单词是个不错的选择.何大爷给出了一种分单词的方法,何大爷认为两个单词是同一类的当这两个单词的各个字母的个 ...
- 20180828Zabbix3使用percona-zabbix-templates监控MySQL
引用网址: http://blog.chinaunix.net/uid-16844903-id-3535535.html http://www.ywnds.com/?p=6199 https://ww ...
- 前台JSON对象传给springmvc,解析为map对象
前台JSON对象传给springmvc,解析为map对象 javascript: $.ajax({ url : url, method : 'post', contentType : 'applica ...
- 【JavaScript】离开页面前提示
离开页面前的提示不能够用onunload去做,由于它仅仅是兼容IE,你要兼容Google与FireFox就蛋疼了. 并且这个事件还是关闭之后才会触发的. 取而代之能够用onbeforeunload去实 ...
- runloop简单介绍
runloop是iOS底层机制中保持我们的程序一直运行的机制.他可以让线程一直循环不退出.而在我们正常的编程中.线程其实是线性的,当线程处理完我们的代码以后就自动退出了.runloop就是保证我们的应 ...
- URAL 1601. AntiCAPS (strings)
1601. AntiCAPS Time limit: 0.5 second Memory limit: 64 MB The blonde Angela has a new whim: internet ...
- 【iOS】网络载入图片缓存与SDWebImage
载入网络图片能够说是网络应用中必备的.假设单纯的去下载图片,而不去做多线程.缓存等技术去优化,载入图片时的效果与用户体验就会非常差. 一.自己实现载入图片的方法 tips: *iOS中全部网络訪问都是 ...
- WPF中控件TextBlock使用(简单)
TextBlock主要用来显示文字.比方: <TextBlock Name="txtBlockOutpuMessage" Text="hello" / ...
- Delphi7中的函数与过程(Function and Procedure)
1.锁住空间的位置,可以选择Edit--->Lock component ,也可以在窗体设计面板下面找到组件排版功能栏,第二排里面有个带锁的图标,表示组件可以被锁住.点击一下,组件的大小和位置就 ...
- Spring Boot、微服务架构和大数据
一文读懂 Spring Boot.微服务架构和大数据治理三者之间的故事 https://www.cnblogs.com/ityouknow/p/9034377.html 微服务架构 微服务的诞生并非偶 ...