vue组件的封装及使用，全局注册和页面注册-CFANZ编程社区

1.在src/components文件夹下创建新的公共组件

(没有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>
<pagetools />

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

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

给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>

3.2使用插槽传入特定内容

使用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()

4.1局部组件，使用的时候需要在components中注册；全局通用组件一般是定义为全局组件的，不需要局部注册；在main.js中使用Vue.component()全局注册：

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

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

5.1在main.js中引入

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

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

vue组件的封装及使用，全局注册和页面注册_Vue_06

5.2封装

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

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

5.3 在main.js中全局注册组件

import components from '@/components/index'

Vue.use(components)