Đăng ký Component trong Vuejs

Trong phần trước chúng ta đã tìm hiểu về component ở mức cơ bản thế nhưng đây là phần quan trọng trong Vue nên sẽ có cả 1 loạt bài theo sau. Bài đầu tiên sẽ là hướng dẫn đăng ký một component trong Vuejs các bạn nhé

Nếu bạn vẫn chưa nắm rõ về component cơ bản bạn có thể bắt đầu từ phần Cơ bản về component ngay ở bài học trước.

1. Đăng ký một Component trong Vuejs

Tên Component

Component được đặt tên khi đăng ký. Ví dụ khi bạn đăng ký component ở cấp toàn cục, chúng ta sử dụng cú pháp:

Vue.component('my-component-name', { /* ... */ })

Dĩ nhiên khi sử dụng component chúng ta thường đặt tên theo mục đích sử dụng. Tuy nhiên khuyến cáo chúng ta nên đặt tên của component tuân thủ theo quy định của W3C để tránh khỏi nguy cơ xung đột với các HTML elements hiện tại cũng như trong tương lai.

Đăng ký Component ở cấp toàn cục

Những component này được đăng kí ở cấp toàn cục có nghĩa là sau khi đăng ký component đó có thể sử dụng trong template của bất cứ đối tượng Vue gốc (new Vue) nào. Chúng ta sử dụng Vue.component để đăng ký.

Cú pháp đăng ký component ở cấp toàn cục như sau:

Vue.component('my-component-name', {
  // ... các tuỳ biến ...
})

Ví dụ minh họa:

Vue.component('component-a', { /* ... */ })
Vue.component('component-b', { /* ... */ })
Vue.component('component-c', { /* ... */ })

new Vue({ el: '#app' })

<div id="app">
  <component-a></component-a>
  <component-b></component-b>
  <component-c></component-c>
</div>

Đăng kí Component ở cấp cục bộ

Thực tế việc đăng ký component toàn cục đa phần không phải là một biện pháp lí tưởng. Bởi đôi khi bạn không sử dụng một component nữa, component đó vẫn có thể được thêm vào bản build cuối cùng. Vô hình chung không cần thiết và  làm gia tăng khối lượng của JavaScript mà người dùng cần phải tải xuống.

Trong những trường hợp như vậy, bạn có thể định nghĩa component dưới dạng object trong JavaScript:

var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }

Sau khi khai báo các component, bạn muốn sử dụng trong tuỳ chọn components:

new Vue({
  el: '#app'
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

Đối với mỗi thuộc tính trong đối tượng component (object component), khoá (key) sẽ trở thành tên cuả phần tử tuỳ biến (custom element), trong khi giá trị (value) sẽ bao gồm object options cho component.

Lưu ý rằng bạn sẽ không truy xuất được đến các component được đăng kí cục bộ từ các component con. Ví dụ, nếu như bạn muốn sử dụng ComponentA trong ComponentB, bạn phải khai báo như sau:

var ComponentA = { /* ... */ }

var ComponentB = {
  components: {
    'component-a': ComponentA
  },
  // ...
}

Trường hợp bạn sử dụng module ES2015 (thông qua Webpack hoặc Babel) thì khai báo như sau

import ComponentA from './ComponentA.vue'

export default {
  components: {
    ComponentA
  },
  // ...
}

Đối với ES2015+, việc đặt một tên biến như ComponentA bên trong một object  thì tên của biến đồng thời là:

• tên của đối tượng tuỳ biến để sử dụng trong template, và
• tên của biến bao gồm các tuỳ chọn cho component

2. Đăng ký Hệ thống Module

Phần này giành riêng cho những ai sử dụng hệ thống Module. Nếu bạn không sử dụng module system với import/require thì bạn hoàn toàn có thể bỏ qua phần này.

Đăng kí ở cấp cục bộ trong hệ thống Module

Nếu sử dụng một hệ thống module như Babel và Webpack trang chủ của Vue khuyến khích tạo một file riêng cho mỗi component.

Và bạn sẽ cần phải nhập (import) từng component mà bạn muốn sử dụng trước khi đăng kí cục bộ. Ví dụ, trong một file ComponentB.js hoặc ComponentB.vue:

import ComponentA from './ComponentA'
import ComponentC from './ComponentC'

export default {
  components: {
    ComponentA,
    ComponentC
  },
  // ...
}

Tự động đăng kí toàn cục của những component cơ sở

Thực tế sẽ có rất nhiều component dùng chung, ví dụ một component dạng wrapper cho một phần tử như button hoặc input. Trong Vue chúng ta gọi chúng là những component cơ sở (base component) và đương nhiên vì là cơ sở nên chúng được dùng rất thường xuyên bên trong các component khác.

Kết quả là nhiều component có thể có một danh sách component cơ sở khá dài:

import BaseButton from './BaseButton.vue'
import BaseIcon from './BaseIcon.vue'
import BaseInput from './BaseInput.vue'


export default {
  components: {
    BaseButton,
    BaseIcon,
    BaseInput
  }
}

Chỉ để hỗ trợ cho một chút markup trong template:

<BaseInput 
    v-model='searchText' 
    @keydown.enter='search' />
<BaseButton @click='search'>
  <BaseIcon name='search' />
</BaseButton>

Vớ Webpack (hoặc Vue CLI 3+, công cụ sử dụng Webpack), chúng ta có thể đăng kí các component cơ sở thông dụng ở cấp toàn cục với require.context.

Dưới đây là một ví dụ về cách nhúng các component cơ sở ở cấp toàn cục component vào file bắt đầu của ứng dụng (ví dụ: src/main.js):

import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'


const requireComponent = require.context(
  // Đường dẫn tương đối của thư mục component
  './components',
  // có tìm component trong các thư mục con hay không
  false,
  // regular expression để tìm các file component cơ sở
  /Base[A-Z]\w+\.(vue|js)$/
)


requireComponent.keys().forEach(fileName => {
  // Lấy cấu hình của component
  const componentConfig = requireComponent(fileName)


  // Lấy tên của component dùng PascalCase
  const componentName = upperFirst(
    camelCase(
      // Bỏ phần đầu `'./` và đuôi file
      fileName.replace(/^\.\/(.*)\.\w+$/, '$1')
    )
  )


  // Khai báo component cấp toàn cục
  Vue.component(
    componentName,
    // Tìm kiếm các tùy chọn của component trong thuộc tính `.default`
    // Thuộc tính này sẽ khả dụng nếu component sử dụng `export default`
    // nếu không thì dùng chính `componentConfig`
    componentConfig.default || componentConfig
  )
})

Cũng chú ý rằng bạn phải đăng kí component cấp toàn cục trước khi khởi tạo đối tượng Vue gốc (new Vue). Đây là một ví dụ trong một ngữ cảnh thực tế.

3. Lời kết

Trên đây là toàn bộ cú pháp cũng như ví dụ về cách đăng ký component trong Vuejs. Còn chỗ nào chưa hiểu các bạn cứ mạnh dạn comment bên dưới nhé. Chúc các bạn học tốt!