插槽Slots及组件高度定制化

1.插槽Slots的认知和用法和高度定制化

1.插槽Slots的认知和用法

我们在平时游览的页面或者软件时，会发现我们在点击一个跳转之后经常只有一个区域发送了变化，而这个就是我们的插槽的应用，将一个页面分成好几个部分，每一次跳转只改变我们的一个显示区域即可，我们先一个组件。

创建好了我们的组件之后在创建两个页面来调用我们的组件。

创建好了之后在页面中运行来查看我们的页面效果。

另一个页面运行也是一样的效果，这个就是我们的页面布局基础。

2.Slots高度自定义

我们在改变的时候只需要改变其中一个区域即可，其他的两个区域不需要改变，所以我们页面不相同的地方也只有会改变的区域。

另一个页面可以设置不一样的值来展示对比我们的页面效果，可以发现我们只有中间的区域会改变而其他两个区域仍是保持不变顶。

我们也可以设置v-for循环设置页面内容

可以看的我们的页面内容已经改为了我们创建的循环里面的内容。

我们可以在另一个页面来创建几个view组件并设置class类名来实现我们的显示块。

的头部并不是一定不会变化的，所以我们可以给其也设置一个Slot组件来实现我们的头部变化，不同的是我们设置的Slot需要给其命名，所以这个就是我们的具名插槽。

我们的具名插槽调用方式有两种一种是使用我们的 v-slot：插槽名：

我们的两种调用方式都会使用我们的template组件在这个组件里面输入我们的区域内容。

另一种方式是v-slot的简写#我们只需要将我们前的v-slot部分改为#即可，效果是一样的。

着两种方式根据自己的习惯来即可，不过还是推荐使用第二种因为很方便。

我们也可以用这个方法来显示我们的显示内容的区域，效果是一样的在我们使用这个方式的时候方便对其设置。

以上就是我们的slot用法和认知了。