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

Posted 2023-02-22

【中文标题】Vue JS - 如何在父组件中获取道具值

【英文标题】：Vue JS - How to get props value in parent component

【发布时间】：2021-07-31 00:00:25

【问题描述】：

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

App.vue

<template>
  <div id="app">
    <img  src="./assets/logo.png"  />
    <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

【参考方案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>

【讨论】：

如果你是 Vue 版本 this .haveBanner=e"'

@bricksphd 我不确定这是否正确。你仍然需要 :have-banner="haveBanner" 来传递道具。然后你可以像这样收听 \@update:haveBanner 事件： \@update:haveBanner="haveBanner = $event"

我试过这个方法，但是不行，点击按钮时component-1中haveBanner的值没有变化

@Synchro 您使用的是哪个版本的 Vue？ .sync 修饰符仅在 Vue 2.3+ 中可用

99/5000 翻译结果我用的是版本2，虽然你提到了2.3），但是我稍微粗略地解决了这个问题。我没有将component-2导入到component-1中，而是简单地将这两个组件组合在一起，即将component-2中的代码拖到component-1中