前几天因为在练习React 所以耽搁了博客的更新 这几天又回顾了Vue的各种属性的用法 我发现一个跟 父子传值差不多的属性 slot 插槽属性 在vue的官方文档中
solt是对组件的扩展，通过slot插槽向组件内部指定位置传递内容，通过slot可以父子传参
可以利用slot属性进行传递 通俗的理解就是 就是在组件模板中使用slot定义一个位置 在通过slot的属性进行匹配 替换组件模板中的位置
在App.vue 里面引入Slot.vue 子组件
<template> <div> <router-view /> <!-- 组件中传递 --> <Slot> <slot>来自父组件的Hello!word</slot> </Slot> </div> </template> <script> import Slot from "./components/Slot"; //引入Slot 页面 展示利用插槽slot进行传值 export default { components: { Slot, }, data() { return {}; }, }; </script>在Slot.vue中
<template> <div> <slot></slot> </div> </template>这是利用匿名插槽来进行传递
可以让组件模块化更清晰，同时复用性更高，不至于，我要一杯茶，我就要定义一个组件，我要一杯牛奶我又定义一个组件，有了插槽，我只需要定义一个杯子，要喝什么由使用的传人决定。
上述代码也叫匿名插槽，就是默认把模板全部渲染到solt中，如果需要指定渲染，就需要使用具名插槽,简单说就是起一个名字，告诉他小红该坐那儿，小明该坐那儿
元素可以用一个特殊的属性 name来配置如何分发内容。多个插槽可以有不同的名字。具名插槽将匹配内容片段中有对应 slot 特性的元素。
（具名插槽） 组件中有多个命名的slot 插槽时，可以实现父组件对子组件的指定位置显示内容或传参
