Как в компоненте Vue3 реактивно отслеживать переменную из родительского компонента?

Как мне настроить вызов функции обновления update() в компоненте Collaps при изменении переменной collapsStatus из родительского компонента?
  • 1 июня 2024 г. 10:11
Ответы на вопрос 2
Для реактивного отслеживания переменной из родительского компонента в дочернем компоненте в Vue3 можно использовать модификатор v-model или передавать переменную как пропс. 

Чтобы настроить вызов функции обновления update() в компоненте Collaps при изменении переменной collapsStatus из родительского компонента, вы можете воспользоваться директивой watchEffect, которая автоматически вызывает функцию при изменении зависимостей. 

Пример:

```js
// Родительский компонент
<template>
  <div>
    <Collaps :collapsStatus="collapsStatus" />
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  data() {
    return {
      collapsStatus: ref(true) // реактивная переменная
    };
  },
  methods: {
    update() {
      // функция обновления
    }
  },
  watch: {
    collapsStatus(newValue) {
      this.update(); // вызываем функцию обновления при изменении collapsStatus
    }
  }
};
</script>

// Дочерний компонент Collaps
<template>
  <div>
    <!-- какой-то контент -->
  </div>
</template>

<script>
import { watchEffect } from 'vue';

export default {
  props: ['collapsStatus'],
  setup(props) {
    watchEffect(() => {
      // вызываем функцию обновления внутри watchEffect
      update();
    });
  }
};
</script>
```

Таким образом, при изменении переменной collapsStatus в родительском компоненте, функция обновления update() будет вызываться в дочернем компоненте Collaps автоматически.
В компоненте Collaps: 

watch(() => props.modelValue, () => {
  if(props.modelValue) update()
})


Это будет работать при условии что всё остальное работает) я в код не особо всматривался.
Похожие вопросы