公共组件的使用(use)

384 阅读1分钟

use,是它是Vue提供一个静态方法,用来向Vue注册插件,增强vue的功能

1.格式Vue.use(com)

这个com就是一个导入的对象,使用这个方法有一个必要条件,就是

com里面必须提供一个 install 函数,这个函数必须有一个参数,而这个参数就是Vue默认进去的,

 1.  import PageTools from './PageTools/index.vue'
 2.    export default {
 3.      install(Vue) {
 4.     Vue.component('PageTools', PageTools)
 5.    }
 6.   }

可以在上面引入多个组件,并全部在Vue.component上注册,

2.最后在main.js中引入,并使用Vue.use(com)注册

  import com from './components'

  Vue.use(com)
  

3.这样在全局中都可以使用来使用它

    <template>
      <div id="app">
        <h1>vue-loading</h1>
        <page-tools></page-tools>//该组件就是自己定义的组件
      </div>
    </template>

通过以上分析我们可以知道,在我们以后编写插件的时候可以有两种方式。

一种是将这个插件的逻辑封装成一个对象最后将最后在install编写业务代码暴露给Vue对象。这样做的好处是可以添加任意参数在这个对象上方便将install函数封装得更加精简,可拓展性也比较高。也可以封装多个组件,而main.js上没有多余代码

还有一种则是将所有逻辑都编写成一个函数暴露给Vue