19.使用slot插槽封装

1.封装头部组件

<template>
  <div class="head_container">
    <slot name="left"></slot>
    <div>
      <span>{{ title }}</span>
    </div>
    <slot name="right"></slot>
  </div>
</template>
export default {
  name: "homeTop",
  //定义props的title属性
  props: {
    title: String,
  },
}

2.在main.js中全局导出组件

import HeadTop from './views/HeadTop.vue'
Vue.component('HeadTop', HeadTop)

3.当你要使用组件的时候 如果只要中间的title ，那么solt插槽就不要使用

    <HeadTop title="我的">HeadTop>

3.如果左右两边都需要加东西，那么就使用插槽，因为在之前定义了插槽的名字，所以调用的时候需要指定插槽的name，判断你是加在哪里

    <HeadTop :title="address.name">
      <div class="icon" slot="left">
        <i class="el-icon-search">i>
      div>
      <div class="login" slot="right" @click="goToLogin">
        <span>登录span>/
        <span>注册span>
      div>
    HeadTop>