vue组件封装共用的组件

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/qq_40816649/article/details/99884110

这里提供两种vue封装共用组件的方法

方法一：
main.js中

import ListItem from './components/list.vue'//封装共用组件方法一
Vue.component('ListItem',ListItem)

方法二：

新建vue文件的时候再建个相应的js文件。
component.js

import child from './component.vue'

export default child.install = function (Vue) {
  Vue.component(child.name,child)
}

main.js中

import child from './components/component/component.js'//封装共用组件方法二
Vue.use(child)

通过上面的两种方法定义公共组件后都可以直接<child>和<component>这样调用组件了，无需在每个vue文件中important组件了。

说说方法二吧根据官方文档提供的api

vue使用install定义安装全局组件需要install和use这两个api来配合才能完成。我更喜欢第一种但是今天看了公司的代码认识到了第二种方法，也发现了vue提供了不少提高生产效率的api往后会继续深入去学习这些api。

同时也解决了一个困惑很长时间的问题，element ui中的message这个组件不需要vue.use安装直接就能用，因为element源码中直接将这个组件赋值到vue的prototype上了，其他的组件都只export 暴露出install方法所以其他组件需要vue.use安装