Vue组件间数据共享

在一些 Vue 前端项目中，一个页面可以看作是由一些子组件拼装成的。但经常一些数据在多个组件中都要用到，并且要保证数据的实时更新。因此需要解决数据在各个组件间共享。常规思路有两个，一个是设置全局变量，另一个是进行变量传递和监听。

使用 Vuex

Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。

看官方文档。

组件间数据传递

最基本的是父-子组件数据传递。
在父组件 father.vue 中引用子组件 child.vue，通过设置 :message=“name” 把 name 的值传给 child 组件。这里的 :message相当于 v-bind:message 。

//father
<template>
    <div class="app">
        <child :message="name"></child>
    </div>
</template>
<script>
    import child from './child.vue';
    export default {
        components: {
            child
        },
        data() {
            return {
                name: 'son'
            }
        }
    }
</script>

然后在 child.vue 文件中声明获取到的 message 即可。

//son
<template>
    <span>I am {{ message }}</span>
</template>
<script>
    export default {
        props: ['message']
    }
</script>

prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。修改子组件的 prop 值，是不会传回给父组件去更新视图的。
这里直接传值不太现实，但是可以通过在父组件 $on 监听自定义事件，当子组件里 $emit 触发该自定义事件的时候，父组件执行相应的操作。

//father
<template>
    <div class="app">
        <p>{{ num }}</p>
        <child :message="name" :number="num" @doAdd="addFather"></child>
    </div>
</template>
<script>
    import child from './child.vue';
    export default {
        components: {
            child
        },
        data() {
            return {
                name: 'son',
                num: 0,
            }
        },
        methods: {
            addFather () {
                this.num += 1;
            }
        }
    }
</script>

//son
<template>
    <span>I am {{ message }}</span>
    <button @click="addSon">{{ number }}</button>
</template>
<script>
    export default {
        props: ['message', 'number'],
        methods: {
            addSon () {
                this.number += 1;
                this.$emit('doAdd');//向父组件传递
            }
        }
    }
</script>

因此只要父子组件间设定一个共同的约定可以用这种方法实现(伪)子组件向父组件传值。但是应用场景很少。同理兄弟组件间可以一使用这种方法来传递，就是会变得很麻烦，很麻烦，很麻烦。