手记

vue组件封装共用的方法

这里提供两种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安装

4人推荐
随时随地看视频
慕课网APP

热门评论

uyyyyy yu    广告费

bbb

查看全部评论