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