VueJS 1：按钮点击动态更新Prop显示子组件问题求助

问题描述 #

初始时isVisibleTableView为false，点击按钮后将其改为true，以此控制TableView组件显示，但当前实现不生效，需解决运行时更新Prop控制组件显示的问题。

现有代码 #

WarehouseAdd组件

<el-col :span="4" v-if="isWarehouseReplicate" class="apply">
    <button class="btn blue" :disabled = "isApply" @click="onClickApply()"> Apply
        <i class="fa fa-anchor"></i>
    </button>
</el-col>
<tableview isVisible="isVisibleTableView"></tableview>

<script>
import tableview from './TableView'
components: {
  tableview
},
data() {
  return {
    isVisibleTableView: false,
  }
},
onClickApply: function () {
  console.log('onclick');
  this.isVisibleTableView = true;
}
}
</script>

TableView组件

<template>
  <div class="row" v-if="isVisible">
   // some code
</template>

<script> 
  props: [
   'isVisible']
</script>

解决步骤 #

核心问题是父组件传递Prop的方式错误：你当前传递的是字符串"isVisibleTableView"，而非绑定父组件的响应式变量，导致子组件无法感知变量变化。

1. 修正父组件的Prop绑定 #

将isVisible="isVisibleTableView"改为绑定语法（v-bind:的简写:），确保传递的是父组件的响应式变量：

<!-- 父组件中修改这一行 -->
<tableview :isVisible="isVisibleTableView"></tableview>

2. （可选）规范子组件的Props定义 #

为避免类型错误，可给子组件的Prop指定类型约束：

// TableView组件的script部分
export default {
  props: {
    isVisible: {
      type: Boolean,
      required: true // 若该Prop为必填项，可添加此配置
    }
  }
}

3. 确认子组件的条件渲染逻辑 #

确保子组件模板中的v-if="isVisible"配置正确，当父组件isVisibleTableView变为true时，子组件的isVisibleProp会同步更新，触发条件渲染显示内容。

修改完成后，点击按钮时isVisibleTableView变为true，子组件接收的Prop同步更新，TableView组件即可正常显示。

内容的提问来源于stack exchange，提问作者Aakanksha Khandelwal