Electron + Vue跨平台应用（九）基础技法（四）

Electron + Vue + Vscode构建跨平台应用（一）知识点补充
 Electron + Vue + Vscode构建跨平台应用（二）Electron + Vue环境搭建
 Electron + Vue + Vscode构建跨平台应用（三）利用webpack搭建vue项目
 Electron + Vue + Vscode构建跨平台应用（四）利用Electron-Vue构建Vue应用详解
 Electron + Vue + Vscode构建跨平台应用（五）Electron-Vue项目源码分析
 Electron + Vue跨平台应用（六）效果还不错的登录页面
 Electron + Vue跨平台应用（七）基础技法（一）
Electron + Vue跨平台应用（八）基础技法（二）
Electron + Vue跨平台应用（八）基础技法（三）

这篇主要对如下内容做个解答

1. 插槽
 1.1 匿名插槽
 1.2 具名插槽
 1.3 作用域插槽

1. 插槽

插槽类似一个占位符，可以分为匿名插槽，具名插槽和作用域插槽三种；使用插槽技术可以达到模块化开发的目的；

1.1 匿名插槽

也称呼为默认插槽，当父组件不为子组件指明name属性的时候，则使用默认插槽

1.2 具名插槽

我们可以为插槽制定一个名称，这样父组件在引用的时候，可以通过name属性来制定绑定到具体的插槽

1.3 作用域插槽

简单理解就是这个插槽可以携带数据，通过父组件通过slot-scope来获取子组件的传递的数据，然后渲染出对应的元素

完整的代码如下:

//父组件：
<template>
  <div class="main">{{title}}
    <child-component>
        <p>子组件-匿名插槽</p>
    </child-component>
    <child-component slot="namedSlotFirst" class="childHasName"  >
        <p>子组件-具名插槽</p>
    </child-component>
    <child-component>
        <template slot="spaceSlot" slot-scope="userName">
          <p>子组件-作用域插槽内容</p>
          <div v-for="(item,index) in userName.fullname" :key="index">{{item}}</div>
        </template>
    </child-component>
  </div>
</template>

<script>
import childComponent from '@/view/SlotChild'
export default {
  name: 'SlotActivity',
  components: {
    childComponent
  },
  data () {
    return {
      title: '父组件'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.childHasName{
  background: yellow;
}
</style>

// 子组件
<template>
  <div class="main">
    <!-- 匿名插槽 -->
    <slot class="childDefaultName"></slot>
    <!-- 具名插槽 -->
    <slot name="namedSlotFirst"></slot>
    <!-- 作用域插槽 -->
    <slot name="spaceSlot" :fullname="allnames"></slot>
  </div>
</template>

<script>
export default {
  data () {
    return {
      allnames: ['张三', '李四', '王五']
    }
  },
  methods: {
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.childDefaultName{
  background: yellow;
}
</style>

运行效果如下：
在这里插入图片描述
总结：

通过对slot指定name属性，使其成为具名插槽
插槽的样式由父组件决定，如在父组件中设置child-component class=“childHasName”；我们无法通过设置slot的class或者id来设置样式，如在子组件中设置slot class=“childDefaultName”，是无法产生对应css样式效果的；
父组件可以直接为子组件绑定html元素来替换子元素中的slot，也可以使用template来替换子元素中的slot
slot-scope=“userName” 来取得作用域插槽绑定的数据即上文中的:fullname=“allnames”，然后就可以通过userName.fullname来获取具体的子组件的值了；
userName可以随便替换其他名称，同时子组件中的fullname也可以随意替换
当使用template来替换插槽元素的时候，slot=“spaceSlot” slot-scope="userName"这两个属性需要在template内部，如果你写成如下代码

你会发现渲染就出错了