Vue JS - How to get props value in parent component

Question

I have three components component-1, component-2, and an App component, I pass a Boolean props from component-1 to component-2 then using @click event I change the props value from true to false and vice versa

App.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" width="20%" />
    <component1 />
  </div>
</template>

component-1.vue

<template>
  <div>
    <component2 :have-banner="true" />
  </div>
</template>

<script>
import component2 from "./component-2";
export default {
  components: {
    component2,
  },
};
</script>

component-2.vue

<template>
  <div>
    <button @click="AssignBanner = !AssignBanner">Click me</button>
    <p>{{ AssignBanner }}</p>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    haveBanner: Boolean,
  },
  data() {
    return {
      AssignBanner: this.haveBanner,
    };
  },
};
</script>

I want to get the value of the props in component-1, that is, I want to track the changing value in component-1, since I want to write some logic, but I can’t keep track of the value in component-1.

You can see the given code in codesandbox

valentin valentin · Accepted Answer · 2021-05-09T09:18:42

Looks like you want to achieve two-way binding for the prop haveBanner. You can achieve this with the .sync modifier if you are using Vue 2.3+.

component-1.vue

<template>
  <div>
    <component2 :have-banner.sync="haveBanner" />
  </div>
</template>

<script>
import component2 from "./component-2";
export default {
  components: {
    component2,
  },
  data() {
    return {
      haveBanner: true,
    }
  },
};
</script>

component-2.vue

<template>
  <div>
    <button @click="assignBanner = !assignBanner">Click me</button>
    <p>{{ assignBanner }}</p>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    haveBanner: Boolean,
  },
  data() {
    return {
      assignBanner: this.haveBanner,
    };
  },
  watch: {
    assignBanner(value) {
      // propagate to parent component
      this.$emit('update:haveBanner', value)
    },
  },
};
</script>

Vue JS - How to get props value in parent component

1 Answers