vue组件有两种，一种是全局组件，一种是局部组件。整个项目经常用到的用全局写法，用到比较少的专供特定页面用的使用局部组件。
全局组件引入写法：在项目的main.js中：
import Vue from 'vue...
vue组件有两种，一种是全局组件，一种是局部组件。整个项目经常用到的用全局写法，用到比较少的专供特定页面用的使用局部组件。
全局组件引入写法：在项目的main.js中：
import Vue from 'vue';
import MyComponent from '@/components/MyComponent.vue'; // 导入自己写的组件文件
Vue.use(MyComponent); // 自定义全局组件的时候需要Vue.use();
Vue.component('my-component', MyComponent); //初始化组件
new Vue({
el: '#app',
router,
components: {
App,
MyComponent
},
template: '<App/>',
});
局部组件引入写法：在需要使用组件的a.vue文件中：
<template>
</template>
<script>
import MyComponent from '@/components/MyComponent.vue';
export default {
components: {MyComponent}, // 直接初始化就可以啦，不需要Vue.use();
data() {},
methods: {}
};
</script>
<style lang="scss" scoped>
</style>
下面附上自定义组件的MyComponent.vue文件代码：
<template>
<div>
<a @click="methods1()"></a>
</div>
</template>
<script>
import { MessageBox } from 'mint-ui';
export default {
data () { // 组件内参数定义在data中
return {
data1: {}
};
},
props: { // 组件传参使用props
value1: String,
value2: Number
},
methods: { // 组件的计算方法
methods1 () {
}
}
};
</script>
<style lang="scss" scoped>
</style>
