父组件向子组件传值：
props
父组件：
<template>
<div>
<child :age="age" ></child>
</div>
</template>
<script>
import Child from './'
export default{
data(){
return {age:'XX'}
},
components:{
Child
}
}
</scritp>
子组件：
<template>
<div>{
{age}}</div>
</template>
<script>
export default{
name: "Child",
props:['age'],//or props:{name:String}}
}
</script>子组件向父组件传值：
$emit
子组件：
<template>
<div @click="changeAge('YY')">{
{age}}</div>
</template>
<script>
export default{
props:['age'],//or props:{age:String}
methods:{
changeAge(newAge){
this.$emit('changeAge',newAge)
}
}
}
</script>父组件：
<template>
<div>
<child @changeAge="changeAge"></child>
</div>
</template>
<script>
import Child from './'
export default{
data(){
return {age:'XX'}
},
components:{
Child
},
methods:{
changeAge(newAge){
this.age = newAge;
}
}
}
</scritp>ref
在父组件内通过ref获取子组件实例，然后调用子组件方法，并传递相关数据作为参数。
标识：ref="xxx"
获取：this.$refs.xxx
子组件：
<template>
<div>{
{parentMsg}}</div>
</template>
<script>
export default{
data(){
return {
parentMsg:''
}
},
methods:{
getMsg(msg){
this.parentMsg = msg;
}
}
}
</script>父组件：
<template>
<div>
<child ref="child"></child>
<button @click="sendMsg">SEND MESSAGE</button>
</div>
</template>
<script>
import Childfrom './'
export default{
components:{
Child
},
methods:{
sendMsg(){
this.$refs.child.getMsg('Parent Message');
}
}
}
</scritp>兄弟组件传值：
事件总线
import Vue from 'vue';
const eventBus= new Vue() //创建事件总线
export default eventBus;传递值：使用$emit发布事件
import eventBus from '@u/eventBus'
eventBus.$emit('send',‘hello')接收值：使用$on订阅事件
import eventBus from '@u/eventBus'
eventBus.$on('send', msg )=> {
console.log(msg) //控制台输出 hello
}注意：$on先进行监听，一旦$emit发布事件后所有组件都可以$on监听到事件。所以传递参数的时候一定已经先进行了监听才能得到参数。比如在父组件中$emit事件放在mounted钩子函数中，等待子组件创建并$on开始监听事件后再去触发$emit发布事件。
$off()移除事件监听
import eventBus from '@u/eventBus'
eventBus.$off('send') 消息订阅与发布
事件订阅功能$on是$eventBus对象完成的，与组件无关，如果用v-if销毁子组件的时候，会形成闭包，造成内存泄露，所有要在销毁组件的时候进行取消监听事件
1、一种组件间通信的方式，适用于任意组件间通信。
2、使用步骤：
（1）安装pubsub：npm i pubsub-js
（2）引入：import pubsub from 'pubsub-js'
3、接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身。
methods(){
demo(data){......}
}
......
mounted(){
this.pid = pubsub.subscribe('xxx',this.demo)//订阅消息
}4、提供数据：pubsub.publish('xxx',数据)
5、最好在beforeDestroy钩子中，用PubSub.unsubscribe(pid)去取消订阅。
nextTick
1、语法：this.$nextTick（回调函数）
2、作用：在下一次DOM更新结束后执行其指定的回调
3、什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行。
vuex
1、概念：专门在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。
2、Github地址： https://github.com/vuejs/vuex
什么时候使用vuex
1、多个组件依赖于同一状态
2、来自不同组件的行为需要变更同一状态
Vuex 工作原理图
搭建vuex环境
1、创建文件： src/store/index.js
//该文件用于创建vuex中最为核心的store
//引入Vue核心库
import Vue from "vue"
//引入Vuex
import Vuex from "vuex"
//应用Vuex插件
Vue.use(vuex)
//准备actions——用于响应组件中的对象
const actions ={}
//准备mutations——用于操作数据（state）
const mutations = {}
//准备state——用于存储数据
const state = {}
//创建并暴露store
export default new Vuex.Store({
actions:actions,
mutations,
state,
})
2、在main.js中创建vm时传入store配置项
//引入store
import store from "./store"
......
//创建vm
new Vue({
el:"app",
render:h=>h(App),
store,
})基本使用
1、初始化数据、配置actions、配置mutations，操作文件store.js
//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//引入Vuex
Vue.use(Vuex)
const actions = {
//响应组件中加的动作
jia(context,value){
context.conmmit('JIA',value)
},
}
const mutations = {
//执行加
JIA(state,value){
state.sum += value
}
}
//初始化数据
const state = {
sum:0
}
//创建并暴露store
export dafault new Vuex.store({
actions,
mutations,
state,
})2、组件中读取vuex中的数据：$store.state.sum
3、组件中修改vuex中的数据：$store.dispatch('action中的方法名',数据）或$store.commit(mutations中的方法名',数据)
备注：若没有网络请求或其他业务逻辑，组件中也可以越过actions，即不写dispatch，直接编写commit
getters的使用
1、概念：当state中的数据需要经过加工后再使用时，可以使用getters加工
2、再store.js中追加getters配置
......
const getters = {
bigSum(state){
return state.sum = 10
}
}
//创建并暴露store
export dafault new Vuex.Store({
......
getters
})3、组件中读取数据：$store.getters.bigSum