vue中slot以及mate的用法
将父组件的内容放到子组件指定的位置叫做内容分发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>123</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: 1 } } } } </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>
浩楠哥