BÀI 7: VUE COMPONENTS – XÂY DỰNG GIAO DIỆN DẠNG KHỐI

Đăng ngày Tháng 7 7, 2025

Biết cách tạo component trong Vue
Truyền dữ liệu từ cha → con bằng props
Biết cách sử dụng component nhiều lần

Component là một khối giao diện độc lập, có thể tái sử dụng nhiều nơi.

Ví dụ: <button-custom>, <user-card>, <product-box>…

Bạn chia nhỏ giao diện thành component
Mỗi component có:
- Template (HTML)
- Data riêng
- Logic riêng (methods, computed…)

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <title>Vue Components</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <style>
    body {
      font-family: Arial;
      display: flex;
      gap: 30px;
      padding: 20px;
    }
    .code {
      width: 50%;
    }
    .output {
      width: 50%;
      border-left: 2px solid #ccc;
      padding-left: 20px;
    }
    .user-card {
      border: 1px solid #ddd;
      padding: 10px;
      margin-bottom: 10px;
      border-radius: 5px;
    }
    .user-card h4 {
      margin: 0;
    }
  </style>
</head>
<body>

  <div class="code">
    <h2>Mã nguồn Vue:</h2>
<pre><code>&lt;div id="app"&gt;
  &lt;user-card
    v-for="(user, index) in users"
    :key="index"
    :name="user.name"
    :email="user.email"
  &gt;&lt;/user-card&gt;
&lt;/div&gt;

&lt;script&gt;
const { createApp } = Vue;

createApp({
  data() {
    return {
      users: [
        { name: 'Nguyễn Văn A', email: 'a@example.com' },
        { name: 'Trần Thị B', email: 'b@example.com' },
        { name: 'Lê Văn C', email: 'c@example.com' }
      ]
    }
  },
  components: {
    'user-card': {
      props: ['name', 'email'],
      template: `
        &lt;div class="user-card"&gt;
          &lt;h4&gt;👤 {{ name }}&lt;/h4&gt;
          &lt;p&gt;📧 {{ email }}&lt;/p&gt;
        &lt;/div&gt;
      `
    }
  }
}).mount('#app')
&lt;/script&gt;
</code></pre>
  </div>

  <div class="output">
    <h2>Kết quả hiển thị:</h2>
    <div id="app"></div>
  </div>

  <script>
    const { createApp } = Vue;

    createApp({
      data() {
        return {
          users: [
            { name: 'Nguyễn Văn A', email: 'a@example.com' },
            { name: 'Trần Thị B', email: 'b@example.com' },
            { name: 'Lê Văn C', email: 'c@example.com' }
          ]
        }
      },
      components: {
        'user-card': {
          props: ['name', 'email'],
          template: `
            <div class="user-card">
              <h4>👤 {{ name }}</h4>
              <p>📧 {{ email }}</p>
            </div>
          `
        }
      }
    }).mount('#app')
  </script>

</body>
</html>

Thành phần	Ý nghĩa
`components: { 'user-card': { ... } }`	Đăng ký component `user-card`
`props: ['name', 'email']`	Nhận dữ liệu từ component cha
`template: ...`	HTML của component

<user-card name="Minh" email="minh@gmail.com"></user-card>
<user-card name="Linh" email="linh@gmail.com"></user-card>

→ Bạn không cần viết lại HTML nhiều lần.

Thêm prop avatar và hiển thị hình đại diện <img :src="avatar">
Thêm nút “Xem thêm” và bắt sự kiện @click để hiển thị alert
Dùng component để hiển thị danh sách sản phẩm (name, price)

Bài trước ← BÀI 6: COMPUTED & WATCH – TÍNH TOÁN VÀ THEO DÕI DỮ LIỆU Bài tiếp theo BÀI 8: GIAO TIẾP GIỮA COMPONENTS – PROPS & EMIT →

BÀI 7: VUE COMPONENTS – XÂY DỰNG GIAO DIỆN DẠNG KHỐI

📂 Chuyên mục:

Thảo luận

Hủy

Đăng ký nhận tin mới