vue项目中全局组件的使用

方案 一、直接在main.js文件注册全局组件

1.声明自定义的全局组件test.vue

<template>
    <div>
        {{name}}
    </div>
</template>

<script>
    export default{
        name: 'test',
        data(){
            return {
                name: 'zhangsan'
            }
        }
    }
</script>

<style>
</style>

2.main.js注册组件

import Test from '@/views/webbas/test/test.vue'
Vue.component('Test', Test)

3.在其他任何组件内使用Test全局组件

<template>
    <div>
        <Test />
        ...其他业务代码
    </div>
</template>

方案二、通过vue的install方法以插件的形式注册全局组件

1.声明自定义的全局组件test.vue(和方案一相同)

<template>
    <div>
        {{name}}
    </div>
</template>

<script>
    export default{
        name: 'test',
        data(){
            return {
                name: 'zhangsan'
            }
        }
    }
</script>

<style>
</style>

2.同级目录创建test.js调用install方法注册组件

import Test from './test.vue'
Test.install = function (Vue) {
    Vue.component('Test', Test)
}
export default Test

3.main.js通过Vue.use()调用插件

import Test from '@/views/webbas/test/test.js'
Vue.use(Test)

4.在其他任何组件内使用Test全局组件(和方案一相同)

<template>
    <div>
        <Test />
        ...其他业务代码
    </div>
</template>