Vue自定义组件

发表于

定义组件结构

创建一个 Loading 组件的文件，文件的结构如下

1
2
3
| - loading/
    | - index.js        //导出组件，并且 `install`
    | - Loading.vue     //Loading组件

定义组件

Loading.vue

1
2
3
4
5
<template> </template>
<script> </script>
<style scoped> </style>

.vue 文件定义风格不变

index.js

1
2
3
4
5
6
7
8
9
import LoadingComponent from './Loading.vue'
const Loading = {
	install: function(Vue) {
		Vue.component('Loading', LoadingComponent)
	}
};
export default Loading

首先将 .vue 文件 import 引进来

然后加入 Vue 组件，并加入 install 属性，不加在其他文件引不进

最后将 Loading 对象导出

引用自定义组件

main.js

1
2
3
4
5
6
7
8
9
10
11
import Vue from 'vue'
import App from './App.vue'
import Loading from './components/loading'
Vue.use(Loading)
new Vue({
	el: '#app',
	render: h => h(App)
})

在 main.js 中把自定义的组件引进来，Vue.use 使用，其他不变，然后在其他文件中就可以调用了

如在 App.vue 中使用

1
2
3
4
5
6
<template>
  <div id="app">
    <h3>welcome vue-loading</h3>
    <Loading></Loading>
  </div>
</template>

直接调用即可