vue怎么自己创建组件并引用_VUE 创建组件并且引用

QQ开发交流群:  173683895   173683895   526474645  人满的请加其它群

本文以 ChoosingCity.vue 组件为示例

1.创建组件

如图，在common 中创建了ChoosingCity.vue 组件

2.在router 文件夹下的index.js 配置该组件

import ChoosingCity from '@/components/common/ChoosingCity'

Vue.use(Router)

export default new Router({

routes: [

{

path: '/',

name: 'Home',

component: Home

},

{

path: '/ChoosingCity',

name: 'ChoosingCity',

component: ChoosingCity

}

]

})

3. 引用组件，在Home.vue 中的 script 导入组件，并且在components中声明

import ChoosingCity from './common/ChoosingCity';

export default {

data() {

return {

};

},

components:{

'ChoosingCity': ChoosingCity

},

}

在Home.vue 中的 template 里面的div 里面添加自定义的公共 ChoosingCity 组件