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: ['数据列表', '订单列表']
}
]
}
]