Vue组件的基本使用方法

公共操作

1. src下新建components文件夹

2. 在components文件夹下新建你所需要的组件

Zujian-name.vue
复制代码

3. 在Zujian-name.vue组件中可使用 ‘sc’ 快速生成模板

在需要使用组件的页面中注册组件

1. 需要使用组件的页面中引入

import Zujian-name from '@/component/Zujian-name'
复制代码

2. 在页面中注册组件

export default {
  name: 'Home',
  components: {
    Zujian-name
  }
}
复制代码

3. 在需要的位置使用组件

<Zujian-name></Zujian-name>
复制代码

在Router中全局使用组件

1. 在routes.js中引入组件

import Zujian-name from '@/component/Zujian-name'
复制代码

2. 在需要组件的路由中配置components项

{
    path: '/home',
    name: 'home',
    components: {
      default: Home,
      Zujian-name: Zujian-name //表示Home页面需要此组件
    }
}
复制代码

3. 在全局（App.vue）中添加占位符，为组件留位置

<router-view name="Zujian-name"/>
复制代码

转载于:https://juejin.im/post/5c78d0456fb9a049e660f2a9