持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第19天，点击查看活动详情

1.在src/components设置新的公共组件

<template>
  <el-card>
    <div class="page-tools">
      <!-- 左侧 -->
      <div class="left">
        <div class="tips">
          <i class="el-icon-info" />
          <slot name="left">     <span>文字区域</span> </slot>

        </div>
      </div>
      <div class="right">
        <!-- 右侧 -->
        <slot name="right">按钮区域 </slot>
      </div>
    </div>
  </el-card>
</template>

2.在其他组件中导入该公共组件

import pagetools from '@/components/PageTools'
export default {
  components: {
    pagetools
  }
}

<pagetools></pagetools>

3.插槽传值修改公共组件适合自己页面

公共组件设定插槽和默认值

给slot设定一个name值

• 默认组件显示

<template>
  <el-card>
    <div class="page-tools">
      <!-- 左侧 -->
      <div class="left">
        <div class="tips">
          <i class="el-icon-info" />
          <slot name="left">     <span>文字区域</span> </slot>

        </div>
      </div>
      <div class="right">
        <!-- 右侧 -->
        <slot name="right">按钮区域 </slot>
      </div>
    </div>
  </el-card>
</template>

使用插槽传入特定内容

使用template标签在标签内#slot名,然后在template双标签内传过去html内容

• 特定内容显示在组件中

      <pagetools>
        <template #left>
          <span>测试</span>
          <span>测试2</span>
        </template>
        <template #right>
          <span>测试</span>
          <span>测试2</span>
        </template>
      </pagetools>

4.全局注册组件Vue.component()

我们的业务组件一般都定义成了局部组件，使用的时候需要在components中注册，而我们全局通用组件一般是定义为全局组件的，不需要局部注册

在main.js中使用Vue.component()注册

import Vue from 'vue'
// 全局注册组件
import PageTools from '@/components/PageTools'
Vue.component('PageTools', PageTools)

这样的话导入公共组件时就不用特意导入,直接使用即可

引入和注册组件可以删除掉

import pagetools from '@/components/PageTools'
export default {
  components: {
    pagetools
  }
}

5.使用Vue.use全局注册组件

5.1在main.js中引入

1. Vue.use 可以接收一个对象，Vue.use(obj)
2. 对象obj中需要提供一个 install 函数
3. 在 Vue.use(obj) 时，会自动调用该 install 函数，并传入 Vue构造器

// 全局注册组件
import PageTools from '@/components/PageTools'
const components = {
  install(Vue) {
    Vue.component('PageTools', PageTools)
  }
}
Vue.use(components)

5.2封装

把所有组件注册在src/components/index.js文件中

把所用的公共组件先引入components/index.js中,可以避免在main.js中代码过多

// 全局注册组件
import PageTools from '@/components/PageTools'
export default {
  install(Vue) {
    Vue.component('PageTools', PageTools)
  }
}

在main.js中

// 全局注册组件
import components from '@/components/index'

Vue.use(components)