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