Vue JS - 如何在父组件中获取道具值

Question

我有三个组件 component-1、component-2 和一个 App 组件，我从 component-1 传递一个 Boolean props到 component-2 然后使用 @click 事件我将 props 值从 true 更改为 false，反之亦然

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>

我想获取component-1中props的值，即我想跟踪component-1中的变化值，因为我想编写一些逻辑，但我无法跟踪 component-1 中的值。

可以看到给定的code in codesandbox

Answer 1

看起来您想为道具haveBanner 实现双向绑定。如果您使用的是 Vue 2.3+，则可以使用 .sync modifier 实现此目的。

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>