微信公众网站开发seo优化快速排名技术
1. 组件插槽的作用
父组件向 子组件 传递内容：
- 不是之前的数据传递，是模板数据的传递
我们平常定义的 组件模板，渲染到页面上是这样的：
比如： 我们的组件模板为 a.vue 要渲染在 b.vue 上，就是这样的：
a.vue
<template>我是子组件，要渲染到 b.vue 身上的
</template>
a.vue 导入到 b.vue 上；
b.vue
<template><!-- 子组件的占位符 --><a组件></a组件>
</template><script>
import a组件 from './component/a.vue'export default {components: {a组件}
}
</script>
在 b.vue 中的 子组件占位符 上写内容，在页面上是显示不了的，会被 a.vue 的内容覆盖掉；
b.vue:
<template><!-- 在 b.vue 上显示不了 --><a组件>我是文字</a组件>
</template>
使用组件的插槽功能，可以将 父组件 的元素 填到 子组件 中使用 slot 标签来占位的地方；
a.vue：
<template>我是子组件，要渲染到 b.vue 身上的<!-- 相当一个占位符，可以接收 父组件 中写在 子组件标签中的 内容； --><slot></slot>
</template>
2. 具名插槽
定义：
有时我们需要多个插槽，为了 区分多个插槽，我们可以给 插槽 起名字，这叫做 “具名插槽” 。
主要代码：
父
<template><div><子组件><template v-slot:a> a </template><template v-slot:b> b </template><template v-slot:c> c </template></子组件></div>
</template>
子
<template><div class="list-content"><slot name="a"></slot><slot name="b"></slot><slot name="c"></slot></div>
</template>
注意：
要是 slot 标签没有指定 name 属性，那他的 name 默认为：default
子：
<template><div class="list-content"><slot name="a"></slot><slot></slot></div>
</template>父：
<template><div><子组件><template v-slot:a> a </template><template v-slot:default> b </template></子组件></div>
</template>
代码演示：
出场人物： App ( 父 )， List ( 子）
App.vue：
我们想要在 List.vue 中显示以下的 三个 div 标签；
<template><div class="app-content"><!-- 子组件List.vue --><List :data="data"><div class="header"> 我是头部 </div><div class="center"> 我是内容呢 </div><div class="tail"> 尾部 </div></List></div>
</template><script>
import List from './components/demo3/List.vue'
export default {components: {List}
}
</script>
List.vue：
要显示父元素中的标签，我肯定知道用 slot 标签来进行占位吧；
这时，我们就可以给 slot 标签起不同的名称，来区别 父组件中的标签 要填的位置；
<template><div class="list-content"><slot name="header"></slot><slot name="center"></slot><slot name="tail"></slot></div>
</template>
这时，我们的父组件就要改成这样：
App.vue：
<!-- App 父组件 -->
<template><div class="app-content"><!-- 子组件List.vue --><List :data="data"><template v-slot:header><div class="header"> 我是头部 </div></template><template v-slot:center><div class="center"> 我是内容呢 </div></template><template v-slot:tail><div class="tail"> 尾部 </div></template></List></div>
</template>
- 使用
template标签包裹不同部分的标签； - 给标签添加一个属性
v-slot后面的值 对应子标签上slot标签上的name值；
提问：那这样不也可以将 父组件 中的标签显示在 子组件 中吗？
List.vue (子)
<template><div class="list-content"><slot></slot></div>
</template>App.vue (父)
<template><List><div class="header"> 我是头部 </div><div class="center"> 我是内容呢 </div><div class="tail"> 尾部 </div></List>
</template>
回答： 是的，是可以显示，但是呢，不能灵活的变动位置， 子组件 中不能在 这三个父组件标签 中间任意 穿插 标签。
以下就是可以灵活 布局 的意思：
父：
<List :data="data"><template v-slot:header><div class="header"> 我是头部 </div></template><template v-slot:center><div class="center"> 我是内容呢 </div></template><template v-slot:tail><div class="tail"> 尾部 </div></template>
</List>子：
<template><div class="list-content"><!-- 颠倒位置 --><slot name="center"></slot><slot name="tail"></slot><slot name="header"></slot></div>
</template>
显示为这样的：
