Vue组件间传值

背景

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

1. A页面通过 $route 打开B页面，同时传入参数 id；
2. B页面将参数读取并保存于变量X；
3. 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>