Vue组件间传值

最新推荐文章于 2025-07-05 13:44:41 发布

最新推荐文章于 2025-07-05 13:44:41 发布 · 553 阅读

文章标签：

#vue

前端专栏收录该内容

5 篇文章

订阅专栏

本文探讨了在Vue项目中，A页面通过$route打开B页面并传递id参数，然后B页面将参数传递给子组件C时遇到的问题。当B页面的变量X未及时更新时，子组件C接收到的是初始值。解决方案是在B页面的created钩子中进行赋值操作，确保B先赋值再传递给C。此外，还提出了直接通过参数透传的另一种解决思路。

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

背景

项目上，前端使用了 Vuejs 框架和ElementUI控件库

A页面通过 $route 打开B页面，同时传入参数 id；
B页面将参数读取并保存于变量X；
B页面有子组件C，将变量X传给C

现状

parent.vue （B页面）

<template>
    <child :id="X"></child>
</template>
<script>
import child from 'child.vue'
export default {
    name: 'parent',
    data () {
        return {
            X: 'init'
        }
    },
    mounted: function () {
        this.id = this.$route.query.id
    }
}
</script>

child.vue （子组件C）

<template>
</template>
<script>
export default {
    props: ['id'],
    name: 'child',
    data () {
        return {
        }
    }
    mounted: function () {
        console.log(this.id)
    }
}
</script>

问题

子组件C输出的值是'init'，也就是parent.vue的X变量的初始值。

思路

由于B和C是一同加载的，所以两者的mounted执行顺序并不是固定为 B -> C。这就产生了这个问题：B未将传入的参数赋值给变量X，变量X的值已经传给了C。

后续看到了VUE官网上关于vue实例的生命周期图：

解决思路：B和C的加载顺序固定，那么B就先进行了赋值，而后再传值给C

解决

B的赋值操作，在created里进行

// 原 mounted
    created: function () {
        this.id = this.$route.query.id
    }

后记

想到了另一个解决方法：直接将参数透传

parent.vue

<template>
    <child :id="this.$route.query.id"></child>
</template>