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"/>
複製代碼