如何存储子组件发出的值？

Posted 2023-02-23

【中文标题】如何存储子组件发出的值？

【英文标题】：How can I store an emitted value from a child component?

【发布时间】：2020-04-08 10:06:41

【问题描述】：

从子组件中，我发出一个我希望父组件接收的值。在父组件中，我有一个已启动为 null 的属性，目的是在父组件收到发出的值后更改此值，但由于某种原因它不起作用。

这里是代码

子组件：

<template>
  <div class="gameComponent">
    <b-row>
        <b-col>
            <h3> game.name </h3>
        </b-col>
    </b-row>     
    <b-row>
        <b-col>
            <p> game.platform </p>
        </b-col>
    </b-row>
    <b-row>
        <b-col>
            <b-button @click="viewGameFromLibrary(game)">View Game</b-button>
        </b-col>
        <b-col>
            <b-button @click="removeGameFromLibrary(game.id)">Remove Game</b-button>
        </b-col>
    </b-row>  
  </div>
</template>

<script>
import api from '../assets/javascript/api.js'
import ViewGameVue from './ViewGame.vue';

export default 
    props:['game'],
    methods:
        removeGameFromLibrary(id)
            api.removeGameFromLibrary(id);
            location.reload();
        ,

        viewGameFromLibrary(game)
            this.$emit("viewGame", game)
        

    

</script>

<style>

</style>

这是父组件：

<template>
  <div class="library">
    <ViewGame />
      <b-row>
        <b-col v-for="game in games" lg="4" xl="4">
            <GameInLibrary v-bind:game="game"  @viewGame="getGame"/>
        </b-col>
      </b-row>
  </div>
</template>

<script>

import api from '../assets/javascript/api.js'
import GameInLibrary from '@/components/GameInLibrary'

export default 
  data()
    return 
      games:[],
      gameToView:''

    
  ,
  methods: 
    getGame(game)
      this.gameToView = game
    
  ,
  components:
    GameInLibrary,
    ViewGame: ()=> import('./ViewGame')
  ,
  created()
    api.getAllGamesFromLibrary(this.games)
  

</script>

<style>

</style>

this.gameToView = 游戏似乎无法运行，我有什么办法吗？

【问题讨论】：

在 getGame 方法中运行 console.log(game)。你看到了什么价值？

@AlexHoffman 我看到以下内容：…，这个对象在控制台中是可展开的，当我展开它时，我可以看到与我尝试发送的数据相对应的数据。

【参考方案1】：

由于您在getGame() 中运行console.log(game) 并显示了预期值，这意味着发出的game 值不是未定义的，它实际上是分配给this.gameToView，那么有什么问题？

所以你的父组件接收到来自一个子组件的发射值game。

如果您需要将此值从父组件发送到另一个子组件：<ViewGame/>，您只需像这样传递它：

父组件：

<div class="library">
  <ViewGame :gameToView="gameToView"/>
  ...
</div>

子组件ViewGame:

<div>gameToView</div>
...
props: ['gameToView']

【讨论】：

问题是我需要将此值支撑到 ViewGame 子组件。除非我能访问这个值，否则我不能这样做。

我可以看到非常奇怪的物体......它似乎非常随机。它工作正常，我可以在 Vue 控制台中看到该对象。有时有效，有时无效，非常不一致。似乎没有解释为什么会这样。

@Christopher 我更新了答案，因为您提到您需要将此值发送到第三个组件

更新，由于某种原因，您的解决方案现在可以正常工作。如果有什么问题我会在这里评论。