props、 emit（常用父子通讯方式）
- 父组件传入属性，子组件通过props接收，就可以在内部直接使用；
- 子组件通过 this.$emit('事件名', param)向外弹出一个自定义事件，在父组件中的属性监听事件，同时也可以获取子组件传过来的参数；
// 父组件
<father :data="data" @confirm="handleConfirm"></father>
// 子组件
// 接收参数
props: {
data: {
type: Object,
default: () => {
return {
...
}
}
}
}
// 触发父组件事件
methods: {
handleEmitParent() {
this.$emit('confirm', this.data);
}
}
事件总线 EventBus
- 常用任意两个组件之间通讯，适合小项目；
- 原理：注册的事件存起来，等触发事件时再调用。定义一个类去处理事件，并挂载到Vue实例的this上即可注册和触发事件，也可拓展一些事件管理 三步使用：
- 按需自定义一个EventBus，或者在main.js中全局挂载EventBus
- 在A页面发送事件
- 在B页面监听事件
挂载EventBus
// 按需挂载，新建一个文件，自定义一个EventBus，在所需组件按需引入该文件就好
import Vue from 'vue'
export default new Vue()
// 全局挂载
// main.js文件中
// 通过new Vue 来创建EventBus对象，然后将其挂载到全局
Vue.prototype.$Bus = new Vue()
使用EventBus
// 在A组件中发送事件
// 通过this.$Bus.$emit来发送事件
this.$Bus.$emit('busClick', param)
// 在B组件接收监听事件
// 通过this.$Bus.$on来监听事件
// 注意，需要在vue中生命周期中监听，如在create中监听
created() {
this.$Bus.$on('busClick', res => {
console.log(res, '监听到了');
})
}
Vuex状态管理
- state: Vuex中的公共状态，可以将state看做是所有组件的data，用于保存所有组件的公共数据；
- getters：可以理解为所有组件的computed属性，也就是计算属性；getters的返回值会根据他的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算；
- mutation： 可以理解为store的methods，mutations对象中保存着更改数据的回调函数；第一个参数为state，第二个为自定义参数。只能使用
store.commit('mutations方法名',param ); - action: 类似于mutations，不同在于：1、action提交的是mutations而不是直接更改状态；2、action中可以包含异步操作，mutations中决不允许出现异步操作；3、action中的回调函数第一个参数是context，是一个与store实例具有相同属性和方法的对象；4、使用
store.dispatch('action方法名', param) - modules: 当应用变得复杂时，store对象可能会变得臃肿，Vuex允许将store分割成模块，每个模块都拥有自己的state、getters、mutations、action、甚至嵌套子模块
$ref(引用的方式获取子节点)
比较常用于父组件调用子组件的方法： this.$refs.hello.handleRef()
attrs
$attrs可以获取父组件传进来但没有通过props接收的属性；
// 父组件
<Child :title="title" :desc="desc" >/>
// 子组件内
<template>
<div>
<h2>{{title}}</h2>
<p>{{$attrs.desc}}</p>
</div>
</template>
<script>
export default {
props: ['title']
// ...
}
<script>
