Component là thành phần cơ bản và quan trọng bậc nhất trong Vue.js. Toàn bộ trang web của bạn được xây dựng và thiết kế bởi các component khác nhau. Chính vì thế, xử lý giao tiếp và tương tác giữa các component là một trong những công việc thường gặp nhất trong xây dựng một ứng dụng Vue.js.

Truyền dữ liệu từ component cha sang component con

Ta cùng xem qua ví dụ sau:

ChildComponent.vue:

<template>
    <div>
      <h1>{{ msg }}</h1>
    </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  props: {
    msg: String
  }
}
</script>

App.vue:

<template>
  <div id="app">
    <child-component msg="Welcome to yeulaptrinh.vn" />
  </div>
</template>

Ta có:

• Component con tạo ra thuộc tính props và sử dụng
• Component cha truyền dữ liệu vào props tới component con.

Khá đơn giản và dễ hiểu đúng không nào, nhưng nếu như component con có thể thay đổi giá trị bởi một button trong nó thì như thế nào?

<template>
    <div>
      <h1>{{ msg }}</h1>
      <button @click="this.age = 'Hello, world!'">Change message</button>
    </div>
</template>

Giá trị msg hiển thị ra màn hình không hề thay đổi, do chỉ component con nhận thay đổi mà component cha không hề hay biết để cập nhật giá trị. Để làm điều này, Vue.js hỗ trợ $emit để làm điều này.

Truyền dữ liệu từ cha sang con

Vue.js hỗ trợ hàm $emit để giải quyết vấn đề này:

ChildComponent.vue:

<template>
    <div>
      <h1>{{ msg }}</h1>
      <button @click="changeMessage">Change message</button>
    </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  props: {
    msg: String
  },
  methods: {
    changeMessage() {
      this.msg = "Hello, world!";
      this.$emit('updateMessage', this.msg);
    }
  }
}
</script>

App.vue:

<template>
  <div id="app">
    <child-component msg="Welcome to yeulaptrinh.vn" @updateMessage="msg = $event"/>
  </div>
</template>

Emit tức là phát ra tín hiệu, component con bắn ra tin hiệu updateMessage, kèm tham số msg mới từ nó gửi lên cha cho mỗi lần thay đổi. Bên component cha đợi tín hiệu updateMessage và cập nhật lại dữ liệu trên chính nó. $event sẽ tham chiếu tới dữ mà mình đã truyền lên thông qua hàm $emit. Kết quả là khi mà việc cập nhật dữ liệu ở con hay ở cha đều được đồng bộ sang bên kia.

Kết luận

Hình vẽ trên có thể tóm lược sơ qua những điều cơ bản về giao tiếp giữa các component cha và con trong Vue.js. Vậy giữa các component khác nhau thì có thể giao tiếp như thế nào? Cùng đón chờ blog tiếp theo