vue 自定义全局组件（插件）方法步骤

最新推荐文章于 2023-09-30 22:05:49 发布

原创最新推荐文章于 2023-09-30 22:05:49 发布 · 1.2k 阅读

4 ·

CC 4.0 BY-SA版权

vue2.0 专栏收录该内容

16 篇文章

订阅专栏

博客主要围绕自定义全局组件（插件）展开，强调了自定义一个全局组件（插件）这一内容，聚焦于信息技术领域的前端开发相关操作。

自定义全局组件（插件）

全局组件：就是可以在main.js里面使用Vue.use()进行全局引入的，然后在其他组件中度可以使用
如：vue-router
   import VueRouter from 'vue-router'
   Vue.use(VueRouter)

普通组件：每次使用都需要引入
如：axios
   import axios from 'axios'

自定义一个全局组件（插件）

1.新建一个hello.vue的文件，里面是组件（插件）的内容
<template>
    <div id="hello">
        {{msg}}
    </div>
</template>

<script>
    export default{
        data(){
            return {
                msg:"你好"
            }
        }
    }
</script>

style       //可写可不写
<style scoped>
    #hello{
        color:red;
    }
</style>

2.新建一个hello.js文件，引入刚才自定义的组件（插件） 
import Hello from './hello.vue'
export default{
    install:function(Vue){
        Vue.component('Hello',Hello)       
    }
}

3.在main.js中引入这个自定义的组件（插件）
import Hello from './hello.js'
Vue.use(Hello);     // 这样就注册了一个全局的Hello组件（插件），不管在哪里都可以使用

使用方法：<Hello></Hello>