Cơ Chế Truyền Dữ Liệu Giữa Các Thành Phần

Trong phát triển WeChat Mini Program, có ba phương thức chính để thiết lập giao tiếp giữa thành phần cha và con:

• Ràng buộc thuộc tính: Truyền dữ liệu một chiều từ cha sang con, giới hạn ở kiểu dữ liệu JSON
• Ràng buộc sự kiện: Cho phép thành phần con gửi dữ liệu ngược về cha với mọi kiểu dữ liệu
• Truy cập trực tiếp: Thành phần cha có thể lấy instance của con để thao tác phương thức và thuộc tính

Truyền Dữ Liệu Từ Cha Sang Con

Phương thức này sử dụng thuộc tính properties trong thành phần con. Ví dụ minh họa:

// Dữ liệu trong thành phần cha
Page({
  data: {
    currentValue: 5
  }
})



<view>Giá trị hiện tại: {{currentValue}}</view>

Thành phần con khai báo thuộc tính nhận giá trị:

Component({
  properties: {
    currentValue: {
      type: Number,
      value: 0
    }
  }
})


<text>Giá trị trong thành phần con: {{currentValue}}</text>

Lưu ý khi sử dụng tên thuộc tính dạng camelCase (ví dụ imageList), cần chuyển thành kebab-case khi khai báo trong WXML:

<counter-component image-list="{{images}}"/>

Component({
  properties: {
    imageList: Array
  }
})

Truyền Dữ Liệu Từ Con Về Cha

Quy trình thực hiện:

1. Định nghĩa phương thức xử lý trong thành phần cha
2. Truyền phương thức qua thuộc tính sự kiện
3. Kích hoạt sự kiện từ thành phần con
4. Đọc dữ liệu qua e.detail trong hàm xử lý

Cài đặt chi tiết:

// Thành phần cha
Page({
  handleValueUpdate(e) {
    this.setData({ currentValue: e.detail.newValue })
  }
})

// Thành phần con
Component({
  methods: {
    incrementValue() {
      const newValue = this.data.currentValue + 1
      this.setData({ currentValue: newValue })
      this.triggerEvent('valueupdate', { newValue })
    }
  }
})


<button bindtap="incrementValue">Tăng giá trị</button>
<text>Giá trị: {{currentValue}}</text>

Truy Cập Instance Thành Phần Con

Thành phần cha có thể lấy trực tiếp instance của con thông qua phương thức selectComponent():

<button bindtap="updateChild">Cập nhật giá trị</button>

// JavaScript
updateChild() {
  const childInstance = this.selectComponent('#mainCounter')
  // Hoặc sử dụng class: this.selectComponent('.counter')
  
  childInstance.setData({ 
    currentValue: childInstance.properties.currentValue + 2 
  })
  childInstance.incrementValue()
}

Phương thức này cho phép thao tác trực tiếp với mọi thuộc tính và phương thức của thành phần con, nhưng nên hạn chế sử dụng để tránh làm phức tạp luồng dữ liệu.