vue插槽基础+vue插件封装

vue插槽基础

1.默认插槽（当你只需要插入一处额外的内容）

封装组件

<template>
  <div class="bread">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>
        <slot></slot>
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>
export default {
  name: 'my-bread'
}
</script>

<style scoped lang='less'></style>

---

使用前需封装一个面包屑插件 components/index.js

• 作用：在vue插件内，进行全局组件的注册
• 插件写法：固定模式
  • 使用一个js模块
  • 导出必须是一个对象
  • 对象中必须有一个属性：install
  • install的值必须是函数
    • 默认传参：Vue 对象
    • 基于 Vue 对象 实现想要的功能
• 使用插件：Vue.use(插件)

// 封装一个插件  注册所有的全局组件
import MyBread from '@/components/my-bread'
export default {
  install (Vue) {
    // 基于Vue做任何事情（注册全局组件，指令，过滤器，挂载原型函数）
    Vue.component(MyBread.name, MyBread)
  }
}

main.js中使用插件

import plugin from '@/components'
Vue.use(plugin)

使用 放插槽在html中

<my-bread>内容1</my-bread>
<my-bread>内容2</my-bread>

---

2.后备内容（当你未插入内容的时候，默认显示的内容）

<!--组件中-->
<slot>后备内容</slot>

3.具名插槽（当你要插入多次内容的时候）

封装组件

<template>
  <div class='page'>
    <!-- 头 -->
    <p>header</p>
    <!-- 内容 -->
    <div>
      <!-- 具名插槽 -->                                    
      <slot name="content">后备内容</slot>
    </div>
    <!-- 尾 -->
    <p>
      <slot name="footer">后备尾</slot>
    </p>
  </div>
</template>

使用

    <page>
      <div slot="content">内容</div>
      <div slot="footer">尾</div>
    </page>

4.作用域插槽（组件内部的数据，在使用组件的插槽内容中使用。）

封装组件

<template>
  <div class='page'>
    <!-- 头 -->
    <p>header</p>
    <!-- 内容 -->
    <div>
      <slot name="content" :pn="pageName" test="测试">后备内容</slot>
    </div>
    <!-- 尾 -->
    <p>
      <slot name="footer">后备尾</slot>
    </p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      pageName: '组件内部数据'
    }
  }
}
</script>

使用

<page>
   <!-- scope 对象是一个变量（数据） 收集了当前插槽上所有的自定义属性 -->
   <div slot="content" slot-scope="scope">内容 {{scope.pn}}</div>
   <div slot="footer">尾</div>
</page>

但是 以上写法 是 2.6.0 vue 版本之前的写法，新版本使用 v-slot 指令

---

v-slot:插槽名称=“作用域插槽的数据” === v-slot:content=“scope”

<!-- <div slot="content" slot-scope="scope">内容 {{scope.pn}}</div> -->
<template v-slot:content="scope">内容 {{scope.pn}}</template>