爬坑日记--------vue之弹出框传值问题

最新推荐文章于 2025-06-29 09:29:57 发布

原创最新推荐文章于 2025-06-29 09:29:57 发布 · 1.8w 阅读

5 ·

CC 4.0 BY-SA版权

爬坑日记专栏收录该内容

9 篇文章

订阅专栏

在Vue项目中，遇到一个弹出框组件传值问题，首次打开时dialogStatus为空，再次打开时值才正确传递。解决方法是将dialogStatus声明为props属性，确保父子组件间数据正确传递。参考了vue.js官方文档来理解并解决这个问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在一个vue页面，进入另一个弹出框定义的vue（传入dialogStatus值）时，我遇到第一次进入弹出框页面dialogStatus值为空，第二次进入时值传过去了。

代码：

vue页面：

<el-dialog :title="textMap[dialogStatus]" size="large" :visible.sync="dialogFormVisible">
      <modify @closeStationDialog="closeStationDialog" :dialogStatus="dialogStatus" ref="modify"></modify>
</el-dialog>

export default {
   components: {
    'modify': () => import('./components/modify')
  },
  methods: {
      handleAdd(){
          this.dialogStatus = 'create';
          this.dialogFormVisible = true;
          console.log(this.$refs.modify);
          if (this.$refs.modify !== undefined) {
            this.$refs.modify.dialogStatus = this.dialogStatus;
          }
      }
   }
}

modify页面（弹出框页面）：

<div style="text-align: center; margin-bottom: 1rem;">
     <el-button @click="cancel('form')">取 消</el-button>
     <el-button v-if="dialogStatus=='create'" type="primary" @click="create('form')">确 定</el-button>
     <el-button v-else type="primary" @click="update('form')">确 定</el-button>
</div>

export default {
    data(){
       return{
          dialogStatus: ''
       }
  }
}

发现问题：将 dialogStatus 值定义在 data 里，出现第一次进入弹出框页面 dialogStatus 值为空，第二次进入时 dialogStatus 有值。

解决办法：将 dialogStatus（需要传递的值）定义在 props 里。

export default {
  props: {
    dialogStatus: {
        default: '1'
    }
  }
}

来自vue.js官网的介绍：vue.js

组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。父组件的数据需要通过 prop 才能下发到子组件中。