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>