vue3中两对容易搞混的概念

1、插槽中的两个概念  

v-slot: 和 v-slot=

（1）v-slot：

v-slot: 是组件指令，命名插槽时用的，常用法如下：

<BaseLayout>
  <template v-slot:header>
    <!-- header 插槽的内容放这里 -->
  </template>
</BaseLayout>

 

v-slot： 的简写形式为#，上面的代码也可以写成#header。

（2）v-slot= 

v-slot=也是用在组件属性位置，作用域插槽，常用法如下：

假设有组件

<!-- <MyComponent> 的模板 -->
<div>
  <slot :text="greetingMessage" :count="1"></slot>
</div>

调用这个组件内部插槽自定义数据的时候用v-slot =

<MyComponent v-slot="slotProps">
  {{ slotProps.text }} {{ slotProps.count }}
</MyComponent>

总结：二者都在组件属性内使用，但作用完全不同。

 

2、vue-router中的两个概念

route和router

（1）route

route中储存路由参数信息，一般使用如下

import {useRoute} from vue-router;

const route  = useRoute();

console.log(route)打印出来如下，主要获取params和query等传递过来的参数，以及path和fullpath等路径信息：

 

（2）router

和route的使用方法类似，但这个对象主要提供路由跳转的一些方法和路由守卫等方法。

import {useRoute} from vue-router;

const route  = useRoute();

打印出来，如下：

 总结：route和router一字之差，用法也基本相同，但作用不同