Как передать значение свойства компонента в другой компонент Vue?

Question

[postya]

Имеется комопннет с навигацией, в ней есть кнопка при клике на которую вызывается метод. Этот метод изменяет значение на isAadaptive = true

В главном компоненте (страница с блоками) есть блок(adaptive-menu), который нужно скрыть или показать, в зависимости от значения свойства isAdaptive из дочернего компонента. В главный компонент я внедряю компонент с навигацией

Иначе говоря, если в дочернем компоненте свойство isApative стало true, то нужно показать блок в главном компоненте

Как можно получить в главном компоненте(Home.vue) значение isAdaptive дочернего кмопонента(Navigation.vue?

Home.vue(главный комопнент):

<template>
<Navigation />

<div class="adaptive-menu"></div>
</template>

<code lang="javascript">
<script>
import Navigation from "../components/Navigation";

data() {
      return {
        
      };
    }
</script>
</code>

дочерний компоннет Navigation.vue:

<template>
<div class="nav-hamburger" @click="showMenu">
        <div class="nav-hamburger-item"></div>
        <div class="nav-hamburger-item"></div>
        <div class="nav-hamburger-item"></div>
      </div>
</template>

<script>
export default {
  name: "Navigation",
  methods: {
    showMenu() {
      this.isAdaptive = true;
    }
  },
  data() {
    return {
      isAdaptive: false
    };
  },
};
</script>

Answer 1

[0xD34F]

В дочернем компоненте:

watch: {
  isAdaptive: {
    immediate: true,
    handler(val) {
      this.$emit('adaptivity-toggled', val);
    },
  },
},

В родительском:

<Navigation @adaptivity-toggled="onAdaptivityToggled" />

methods: {
  onAdaptivityToggled(e) {
    console.log(e); // ну вот и всё
  },
},

Comments

[postya]

Благодарю!