Here, take our customized component general toolbar as an example. The general toolbar is set in PageTools under the folder under components

<template>
  <div class="department-container">
    <div class="app-container">

      <div class="page-tools">
        <div class="left">
          <div class="tips">
            <i class="el-icon-info" />
            <slot name="left">
              Text area
            </slot>
          </div>
        </div>
        <div class="right">
          <slot name="right">
            Button area
          </slot>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
export default {}
</script>

<style lang="scss" scoped>
.page-tools {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .tips {
    line-height: 34px;
    padding: 0px 15px;
    border-radius: 5px;
    border: 1px solid rgba(145, 213, 255, 1);
    background: rgba(230, 247, 255, 1);
    i {
      margin-right: 10px;
      color: #409eff;
    }
  }
}
</style>

Now we want to use this component on multiple pages. We can use local registration and global registration to introduce it into the page.

1. Local registration steps

The idea of local registration is to introduce, register and use the page where the component is to be used

<template>
  <div class="employees-container">
    <div class="app-container">
       // use
      <page-tools>
        <!-- Insert into left Slot position -->
        <template #left>
          <span>This month: Social security is in payment and provident fund is in payment</span>
        </template>
         <!-- Insert into right Slot position -->
        <template #right>
          <el-button type="warning" size="small">Import excel</el-button>
          <el-button type="danger" size="small">export excel</el-button>
          <el-button type="primary" size="small">New employees</el-button>
        </template>
      </page-tools>
    </div>
  </div>
</template>
<script>
  // introduce
  import PageTools from '@/components/PageTools'
  export default {
  // register
      components:{
         PageTools
      }
  }
</script>

2. Global registration

Global registration ideas, in main JS, and you can use it directly on the page where you want to use this component

//  Defines the format of the global component
import Component object from 'xxxxx.vue'
Vue.component('Component name', Component object)

//  Defines the format of local components
import xxxx from 'xxxxx.vue'
export default {
	components: {
	   xxxx
	}
}

// In main Register PageTools component in. JS
// introduce
import PageTools from '@/components/PageTools'
// Use Vue Component registration
Vue.component('PageTool', PageTools)

Above we through Vue The component global api implements global registration, so there is no need to import and register in business components, and you can use it directly.

Although this method is very convenient to complete registration, imagine a scenario. If we need to register many global components, we need to import them one by one, and then call Vue Component method, main JS files will become very large and difficult to maintain. In order to solve this problem, let's learn the form of plug-ins.

3. Common component - Vue Use

Provide the entry file for unified registration. Here, we create index under Src / components JS file, in which the components to be registered are introduced

// Multiple components can be introduced

import PageTools from './PageTools'
import xxxx from './xxxxx'
import........

export default {
  install(Vue) {
    Vue.component('PageTools', PageTools)
    Vue.component('xxxxxx', xxxxxxx)
    Vue.component()...// Multiple components can be registered
  }
}

Then in main JS

import Components from './components'
Vue.use(Components)

Main. Is reduced in the form of plug-ins The amount of code in JS is convenient for main JS file maintenance

The above are several methods of using components. Let's briefly talk about Vue Principle of global registration of use()

Vue. Principle of global registration of use()

Vue.use() is a static method provided by Vue to register plug-ins with Vue (enhance the function of Vue).

You must have used the following plug-ins:

Vue.use(VueRouter)
Vue.use(Vuex)
Vue.use(vant)

principle

In Vue In the use (obj) method, the received parameter is an object. An install function needs to be provided in the object obj. In Vue When using (obj), the install function will be called automatically and passed into the Vue constructor. Here is an example

Example - parameters and execution of install

In main JS

// obj is the plug-in of vue
const obj = {
  install: function(Vue) {
    // console.log(abc === Vue)
    console.log('obj, install.....', Vue)
    Vue.prototype.abcd = 100
    Vue.prototype.$hello = () => {
      alert('vue')
    }
  }
}
// Loading plug-ins
Vue.use(obj)

In the test component

<template>

 <div>
      <el-button type="text" size="small" @click="htest">test</el-button>
 </div>

</template>

<script>

export default {

  methods: {
    hTest() {
      console.log(this)
      console.log(this.abcd)  //The result is 100
      this.$hello()  // Pop up window
    }
  }
}
</script>

Note: in fact, the global import method of elementUI is the same logic.

To learn more about Vue official documents here: https://cn.vuejs.org/v2/api/#Vue-use