vue-注册全局组件并使用

背景：

对于定制化的组件，一般是写完直接引用到页面中，在页面的components选项中声明使用。

对于复用性强的组件，建议封装成一个公共组件，全局注册，注册之后，全局组件可以在任何其他组件的模板中使用（通过ref属性获取对应组件的引用）。

---

以下介绍如何封装全局组件

1、创建一个全局组件

<template>
    <div>
        <p>这是一个全局组件</p>
    </div>
</template>
<script>
export default {
    name: 'MyGlobalComponent',
    data () {
        return {
            loading: false,
            drawerVisible: false,
        }
    },
    methods: {
        init() {
            this.drawerVisible = true
            this.loadData()
        },
}
</script>

2、在主文件（通常是main.js）中，引入这个组件并注册为全局组件

在components文件夹中，创建MyGlobalComponent.vue，MyGlobalComponent2.vue组件，创建register.js文件

方法1：单个引入

//main.js文件
import Vue from 'vue';
...
import MyGlobalComponent from '@/components/MyGlobalComponent.vue';
import MyGlobalComponent2 from '@/components/MyGlobalComponent2.vue';
 
// 注册全局组件
Vue.component('my-global-component', MyGlobalComponent);
Vue.component('my-global-component2', MyGlobalComponent2);

// 创建Vue实例
new Vue({
  el: '#app',
  // 其他选项...
});

方法2：批量引入

import MyGlobalComponent from './MyGlobalComponent.vue';
import MyGlobalComponent2 from '.MyGlobalComponent2.vue';

export default {

  install(Vue) {
    Vue.component("MyGlobalComponent", MyGlobalComponent);
    Vue.component("MyGlobalComponent2", MyGlobalComponent2);
  }
}

//main.js文件
import RegisterComponent from "./components/register.js"

Vue.use(RegisterComponent) // 全局注册组件

// 创建Vue实例
new Vue({
  el: '#app',
  // 其他选项...
});

3、在任何其他组件的模板中直接使用这个全局组件，无需在每个组件中重复引入

<template>
  <div>
    <my-global-component ref="myComponent"></my-global-component>
  </div>
</template>
 
<script>
export default {
  methods: {
    callGlobalComponentMethod() {
      this.$refs.myComponent.init()
    }
  }
}
</script>

原文地址：https://blog.csdn.net/xxuxioxx/article/details/144219824

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！