Vue.use( ) 和 install方法使用

一.使用

        1.在组件my.js创建组件

//在组件my.js组件

//引入全局组件
import HButton from '../components/button.vue'
import Hinput from '../components/input.vue'
//存储组件的名
const components = [
  HButton,
  Hinput,
]
const My = {
  install(Vue) {
    //1.注册全局组件
    components.forEach(component => {
      Vue.component(component.name,component)
    })

    // 2.在Vue.prototype新增的属性和方法   ->  使用  this.$创建的属性
    Vue.prototype.$appName = 'My App'

    // 3.注册自定义属性
      Vue.directive('focus', {
      // 第一次
      inserted (e) {
      
      },
      // 除第一次以外
      update (e) {
       
        }
      })
  }
}
export default My

    2.在mian.js注册组件

import Vue from 'vue'
import App from './App.vue'
//引入插件
import My from './plugins/my'
// 注册插件
Vue.use(My)

new Vue({
  render: h => h(App),
}).$mount('#app')

    3.使用

<template>
<div>
  // 全局的组件
  <HButton></HButton>
  <Hinput></Hinput>
</div>
</template>

<script>
export default {
  mounted(){
      //使用公共方法和属性
    console.log(this.$appName);
  }
}
</script>

<style>
</style>