Vue 开发笔记

问题记录

Vue父组件值变化，子组件不刷新的问题

问题描述：

给麻将游戏开发界面，需求是玩家听了之后，展示“宝”的牌面

在听了之后，前端拿到后端传来的“宝”牌信息，赋值后“宝”的牌面没有显示

问题分析：

父组件：

<!-- 宝牌显示区域 -->
<div class="treasure-card">
  <MahjongTile
      :card="treasureCard"
  />
</div>

子组件：

<template>
  <div class="tile-container">
    <div v-if="show" class="mahjong-tile" @click="handleClick">
      <div class="tile-face">{{ tileText }}</div>
    </div>
    <div v-if="!show" class="tile-back"></div>
  </div>
</template>

<script setup>
import {computed, ref, watch} from 'vue';

const props = defineProps({card: Object});

const emit = defineEmits(['click']);
const show = ref(true)
// 计算牌面文本
const tileText = computed(() => {
  if (props.card.name === "") {
    show.value = false
    return ""
  }
  return `${props.card.name}`;
});

// 处理点击事件
const handleClick = () => {
  emit('click');
};
</script>

由于将“牌”做成子组件，故在父组件传值后，子组件不能及时改变显示，怀疑没有监听到值的变化

解决方法：子组件添加监听器：

// 监听 props.card 的变化
watch(() => props.card, (newCard) => {
  show.value = newCard.name !== "";
});

反思：

单纯是前端基础太差！就连这个项目都是AI代写，欠练！