vue3和vue2插槽slot的使用

一，为什么要使用插槽

 因为在组件内写东西在页面是不显示的。

 那么实现让他显示应该怎么办，就可以考虑使用到插槽slot，这是只需在子组件页面中加上一对slot标签页面中就会显示出p标签中的内容。

 一对slot标签会默认接收所有的内容，页面会全部显示出来，如下图

 以上情况我们称为匿名插槽。当我们只想显示p标签中的内容时候怎么办，此时我们就需要用到具名插槽，写法如下

子组件里这样写

 

 这样就实现只显示p标签的内容了。

二 插槽域（子传父）

父组件：

 

 子组件：

 这样值就传给父组件了

但随着vue版本的更新，vue3去除slot属性改成 v-slot，父组件需要在标签外加一对template和v-slot,子组件和vue2一样无需更改具体如下

 vue3插槽作用域也改变了

写法如下

父组件：

子组件写法不改变。