Skip to content

Tag: component communication

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