Tạo các thành phần con trong Vue

Các thành phần bên trong có cấu trúc giống như thành phần chính mà chúng ta đã làm việc trước đó. Nghĩa là trong file của mỗi thành phần sẽ có các thẻ script và template.

Ví dụ, hãy tạo một thành phần có tên là User. Đặt code của nó trong file tương ứng:

components/User.vue<script>
  export default {
    data() {
      return {
        
      }
    }
  }
</script>

Trong object data của thành phần có thể chứa một số dữ liệu:

components/User.vue<script>
  export default {
    data() {
      return {
        name: 'john'
      }
    }
  }
</script>

Dữ liệu này có thể được hiển thị trong template của thành phần:

components/User.vue<template>
  {{ name }}
</template>

Bây giờ hãy kết nối thành phần mà chúng ta đã tạo với thành phần chính. Để làm điều này, trước tiên hãy import nó:

App.vue<script>
  import User from './components/User.vue'
  
  export default {
    
  }
</script>

Khai báo tên của nó trong tùy chọn components:

App.vue<script>
  import User from './components/User.vue'
  
  export default {
    components: {
      User
    }
  }
</script>

Trong template của thành phần cha có thể hiển thị template của thành phần con. Để làm điều này, cần viết một thẻ mà tên của nó tương ứng với tên của thành phần. Hãy thực hiện điều đó:

App.vue<template>
  <User />
</template>