Xóa dữ liệu ở custom component

có cách nào khi thay đổi dữ liệu ở custom component thứ 1 thì clear dữ liệu ở custom component thứ 2 không ạ.
image

Chào bạn @hieu_nguyen ,

Việc thay đổi dữ liệu ở component 1 và trigger việc thay đổi dữ liệu ở custom component thứ 2 thì bạn có thể thực hiện bằng 2 cách như sau:

  • Cách 1: Sử dụng ref để truy cập vào instance của component 2, và trong methods của component 2 bạn sẽ tạo ra 1 method clearData() để thực hiện việc clear dữ liệu ở custom component 2.

component2/index.js

Component({
  props: {
    onClearData: () => {},
  },
  data: {
    selectedValue: null
  },
  methods: {
    clearData() {
      this.setData({ selectedValue: null });
    }
  }
});

Ở file logic của Page:

// Eg: pages/index/index.js
Page({
  onClearData2() {
    this.component2 && this.component2.clearData();
  },
  saveRef2(ref) {
    this.component2 = ref;
  }
});

pages/index/index.txml

<custom-dropdown data="{{item2}}" onClearData="onClearData2">Hãng xe </custom-dropdown>
<custom-dropdown data="{{item2}}" ref="saveRef2">Hiệu xe</custom-dropdown>

component1/index.js

Component({
  props: {
    onClearData: () => {},
  },
  data: {
    selectedValue: null
  },
  methods: {
    onSelect(newValue) {
      const curSelectedValue = this.data.selectedValue;
      if (newValue !== curSelectedValue) {
        this.setData({ selectedValue: newValue });
        // Clear selected data component2
        this.props.onClearData();
      }
    }
  }
  • Cách 2: Sử dụng event emitter cho Tini app như bài blog sau đây. Ý tưởng: ở component2 bạn sẽ đăng kí 1 sự kiện lắng nghe component1 sự thay đổi giá trị selected. Trong method onSelect ở component1 sau khi setData xong thì bạn sẽ emit 1 event tương ứng, lúc này trong callback ở hàm listener ở component2 bạn sẽ thực hiện việc clear data.

cho mình hỏi mình sử dụng chung 1 custom component để render ra 2 cái dropdown
image
nên ko có 2 component riêng ko biết làm ntn ạ

Từ code mẫu bạn có thể gộp logic của file component1/index.jscomponent2/index.js lại thành 1. Tuy chung 1 component nhưng bạn chỉ truyền ref vào 1 instance đó là component2 nên lúc này sau khi component 1 trigger function onSelect thì chỉ có method clearData() của component2 được thực thi. Nếu bạn cẩn thận hơn thì có thể truyền thêm 1 props là uniqueKey=“giá trị” để phân biệt giữa 2 component với nhau. Lúc này ở hàm clearData trong methods của component bạn xét thêm điều kiện như sau:

Component({
  props: {
    onClearData: () => {},
  },
  data: {
    selectedValue: null
  },
  methods: {
    clearData() {
      if (this.props.uniqueKey = <<expected_value>>) {
      // Clear data if uniqueKey = expected_value
      this.setData({ selectedValue: null });
     }
    }
  }
});