VUE-7-2 自定义全局组件(插件)

全局组件(插件):就是指可以在main.js中使用Vue.use()进行全局引入,然后在其他组件中就都可以使用了,如vue-router.element-UI

    import VueRouter from 'vue-router'
    Vue.use(VueRouter);

普通组件(插件):每次使用时都要引入,如axios
    import axios from 'axios'

步骤:

①首先新建一个compontents文件夹,在里面新建一个文件夹,然后新建vue组件,然后在同级目录下,新建一个index.js文件

结构如图:

②在index.js里面输入,导入组件,然后导出install,目的是为了能够全局使用

 import login from './login.vue'

 export default {
   install: function (Vue) {
     Vue.component('Login', login);
   }
 };

③在main.js里面导入,也可以是user/index.js

import Login from './assets/components/user'

全局引用

Vue.use(Login);

④在App.vue组件中的模板写入,即可展示。

<Login></Login>

猜你喜欢

转载自blog.csdn.net/GoodAll_K/article/details/86063694
今日推荐