Vue 最核心的两个功能：数据驱动和组件化。
组件化开发给我们带来了：
更快的开发效率
更好的可维护性
每个组件都有自己的状态、视图和行为等组成部分。
状态管理包含以下几部分：
state，驱动应用的数据源；
view，以声明方式将 state 映射到视图；
actions，响应在 view 上的用户输入导致的状态变化。
组件间通信方式回顾
大多数场景下的组件都并不是独立存在的，而是相互协作共同构成了一个复杂的业务功能。在 Vue 中为
不同的组件关系提供了不同的通信规则
父传子：Props Down
子组件
父组件
子传父：Event Up
子组件
在子组件中使用 $emit 发布一个自定义事件
父组件
在使用这个组件的时候，使用 v-on 监听这个自定义事件
非父子组件：Event Bus
eventbus.js :
import Vue from 'vue'
export default new Vue()
使用 $emit 发布：
<template>
<div>
<h1>Event Bus Sibling01</h1>
<div class="number" @click="sub">-</div>
<input type="text" style="width: 30px; text-align: center" :value="value">
<div class="number" @click="add">+</div>
</div>
</template>
<script>
import bus from './eventbus'
export default {
props: {
num: Number
},
created () {
this.value = this.num
},
data () {
return {
value: -1
}
},
methods: {
sub () {
if (this.value > 1) {
this.value--
bus.$emit('numchange', this.value)
}
},
add () {
this.value++
bus.$emit('numchange', this.value)
}
}
}
</script>
<style>
.number {
display: inline-block;
cursor: pointer;
width: 20px;
text-align: center;
}
</style>
使用 $on 订阅：
<template>
<div>
<h1>Event Bus Sibling02</h1>
<div>{
{
msg }}</div>
</div>
</template>
<script>
import bus from './eventbus'
export default {
data () {
return {
msg: ''
}
},
created () {
bus.$on('numchange', (value) => {
this.msg = `您选择了${
value}件商品`
})
}
}
</script>
<style>
</style>
父直接访问子组件：通过 ref 获取子组件
ref 有两个作用：
如果你把它作用到普通 HTML 标签上，则获取到的是 DOM
如果你把它作用到组件标签上，则获取到的是组件实例
子组件：
父组件：
在使用子组件的时候添加：
<child ref="c"></child>
可以获取数据
this.$refs.c.focus()
简易的状态管理方案
可以理解为，建立了一个小仓库
如果多个组件之间要共享状态(数据)，使用上面的方式虽然可以实现，但是比较麻烦，而且多个组件之间互相传值很难跟踪数据的变化，如果出现问题很难定位问题。
当遇到多个组件需要共享状态的时候，典型的场景：购物车。我们如果使用上述的方案都不合适，我们会遇到以下的问题
（多个视图依赖于同一状态。）
（来自不同视图的行为需要变更同一状态。）
对于问题一，传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。
对于问题二，我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这
些模式非常脆弱，通常会导致无法维护的代码。
因此，我们为什么不把组件的共享状态抽取出来，以一个全局单例模式管理呢？在这种模式下，我们的组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为！
我们可以把多个组件的状态，或者整个程序的状态放到一个集中的位置存储，并且可以检测到数据的更改。你可能已经想到了 Vuex。
这里我们先以一种简单的方式来实现
store.js （小仓库）：
首先创建一个共享的仓库 store 对象。
把共享的仓库 store 对象，存储到需要共享状态的组件的 data 中
其中一个想要获取数据的组件：
别的组件也是同样的使用方法。
学习笔记有，有抄袭部分！！