Элегантно разрешайте конфликты, когда несколько компонентов страницы uniapp вызывают один и тот же жизненный цикл.

Элегантно разрешайте конфликты, когда несколько компонентов страницы uniapp вызывают один и тот же жизненный цикл.

Сцены

В настоящее время существует страница с вкладками. Нажмите на соответствующие вкладки, чтобы отобразить различные модули, и каждый модуль имеет функцию обновления.

<!-- page页面 -->
<Statistics v-if="tabIndex == 1" />
<RealTime v-else-if="tabIndex == 2" />

Достигаемый эффект: при подтягивании на обновление значение обновляет соответствующий модуль

Подход

Первый: страница отслеживает обновление, а затем вызывает метод обновления, предоставляемый соответствующим модулем через ссылки (не рекомендуется).

1. Добавить ссылку на все подмодули
2. Все подмодули предоставляют метод обновления данных этого модуля.
3. Страница страницы прослушивает событие onPullDownRefresh и вызывает метод обновления модуля через ref, определяя, какой это модуль.

преимущество:

легко писать

недостаток:

1. Если модулей слишком много, менять их будет очень неприятно, поэтому добавлять их можно только по одному.
2. Что делать, если данные в субмодуле не принадлежат субмодулю, а являются подчиненными субмодуля или подчиненными? Затем вам нужно выставить метод из нижнего уровня, а затем передать его вверх слой за слоем и, наконец, передать на страницу страницы.Это очень сложно писать, и степень связи слишком высока.

Второй тип: определите объект на странице страницы, чтобы управлять обновлением всех модулей.

1. Страница страницы определяет объект, в котором хранятся все методы, запускаемые при обновлении по запросу, а затем определяются две функции, которые добавляют или удаляют атрибуты.

// 下拉的方法组成的对象
const pullRefreshEvent = {
    
    };
/**
 * 添加事件
 * @param {string} key 事件的key（唯一值）
 * @param {function} fun 要执行的方法
 */
function addPullRefreshEvent(key, fun) {
    
    
  pullRefreshEvent[key] = fun;
}
function removePullRefreshEvent(key) {
    
    
  delete pullRefreshEvent[key];
}

2. Страница страницы прослушивает событие onPullDownRefresh, распространяет объекты методов управления и выполняет все методы.

onPullDownRefresh(() => {
    
    
  for (let key in pullRefreshEvent) {
    
    
    pullRefreshEvent[key] && pullRefreshEvent[key]();
  }
});

3. Родительский компонент предоставляет методы для вызова подмодулей.

defineExpose({
    
    
  addPullRefreshEvent,
  removePullRefreshEvent,
});

4. Подмодуль получает страницу страницы и добавляет уникальный ключ и метод для выполнения к объекту, который управляет методом обновления по запросу во время инициализации.

const page = getCurrentPage();
const pullRefreshEventKey = "realTime" + Date.now();

// 添加下拉刷新事件
page.$vm.addPullRefreshEvent(pullRefreshEventKey, async () => {
    
    
  // 如果当前选择的不是本模块，则不刷新
  //.....要做得事情
  uni.stopPullDownRefresh();
});

5. Удалите метод обновления по запросу при уничтожении подмодуля.

onUnmounted(() => {
    
    
  page.$vm.removePullRefreshEvent(pullRefreshEventKey);
});

Этот метод в основном использует объектно-ориентированное мышление обработки и обладает высокой связностью.Вам нужно только добавить или удалить методы, которые вы хотите выполнить, в модуле, который должен регистрировать события, и передать все методы, которые необходимо выполнить, на страницу. для унифицированного управления., это не приведет к тому, что код будет беспорядочно написан и его будет сложно поддерживать, так что независимо от того, насколько глубок модуль компонента, это не приведет к увеличению объема кода!