Skip to content

Tag: component

VueCore – Child Component Communication gặp khó khăn ?

Hai hề lô ! Bạn đã biết cách truyền data giữa các child components chưa ?

<template>
  <MyCmp1></MyCmp1>
  <MyCmp2></MyCmp2>
</template>

child component communication
Không thể truyền data giữa 2 child component như này

$emit là gì vậy ? và cách đặt tên emit đúng chuẩn sẽ được giải đáp ở ngay dưới đây

Đọc qua một lần và bạn sẽ không cần phải tìm hiểu lại lần thứ 2

VueCore – Non-prop attributes(cách truyền class, style . . vào vị trí cụ thể trong Component)

Như ở bài VueJs – Component giao tiếp với nhau như thế nào ? thì chúng ta đã biết cách dữ liệu vào Component như student object {name: '...', age: '...'}

Thì ở phần này chúng ta sẽ tập trung vào những thuộc tính : class, style, data-* v.v đây là ~ thuộc tính của html

<template>
    <h1>Student Information</h1>
    <hr>
    <p>Full Name : {{ student.name }}</p>
    <hr>
    <input type="text" placeholder="Adjust full name here">
</template>

// StudentInfoCmp.vue

Làm sao để đặt nó đúng vào vị trí mà chúng ta cần ở Component của ta ?

VueCore – Component giao tiếp với nhau như thế nào ?

Mà tại sao các component lại phải giao tiếp với nhau ?

Giả sử bây giờ ta có 1 component

<template>
    <p>Full Name : student_name_here</p>
    <p>Age : student_age_here</p>
    <p>Grade : student_grade_here</p>
</template>

// Name : StudentInfoCmp.vue

Làm sao để truyền từng item vào để display ra ?

Solution : Sử dụng prop

VueCore – Component là gì ? Tại sao lại sử dụng nó ?

Trước khi đi tìm hiểu về component, tôi muốn hỏi bạn vài câu hỏi !

  1. Tại sao bạn lại tìm hiểu VueJS ?
  2. Bạn có muốn code của mình sau 3 năm vẫn có thể đọc & hiểu không !
  3. Bạn có muốn workflow của mình trở nên tinh tế hơn ?
  4. Bạn có muốn code nhanh hơn ?

Nếu câu trả lời là CÓ ! Thì Component chính là công cụ giải quyết vấn đề đấy cho bạn

Cụ thể là bạn sẽ chia những giao diện tổng thế –> thành nhiều phần nhỏ –> sau đó quản lý

Hơn nữa . . . ta có thể tái sử dụng lại những cấu trúc tương tự nhau