LocalStorage、Cookies

获取本地 LocalStorage、Cookies 保存的值，来进行数据的传递，适合简单的个人设置等类似场景。

父子组件

父组件可以使用 props 传递数据给子组件，子组件在数据变化后，给父组件自定义事件发送消息，传递数据。

<div id="app">
    /* 父组件订阅 increment 事件 */
    <counter v-on:increment="incrementTotal" :total="total"></counter>
</div>

<script>
/* 定义 counter 组件 */
Vue.component('counter', {
  template: '<div><button @click="increment">Increment Button</button></div>',
  props: {
        /* 父组件传递的数据 */
        total: {
            type: Number,
            default: 0
        }
  },
  methods: {
      increment () {
          /* 发送消息给父组件 */
          this.$emit('increment')
      }
  }
})

new Vue({
    el: '#app',
    data () {
        return {
            total: 0
        }
    },
    methods: {
        incrementTotal () {
            this.total++
        }
    }
})
</script>

组件之间

使用 Event Bus 来传递消息

// bus.js
export default new Vue()

// 组件一
import Bus from '../bus.js'
export default {
    data () {
        return {
            total: 0
        }
    },
    mounted () {
        // 订阅 increment 事件
        Bus.$on('increment', () => {
            this.total++
        })
    }
}

// 组件二
import Bus from '../bus.js'
export default {
    mounted () {
        // 发送消息
        Bus.$emit('increment')
    }
}

VUEX

组件有销毁，对应绑定的数据也会销毁，采用 vuex 可以缓存对应数据，保证下次渲染这个组件的状态与销毁前一致，相应的 API 可参考：vuex 文档。