一：父子组件传值
props方式
子组件对外暴露方法并向父组件传递由于触发方法导致的值的变化，父组件接收子组件传递来的值；子组件接收父组件传递来的值，并根据传递来的值在子组件内部进行各种操作
Tips：子组件只能接受值和发射(状态)值，父组件不能操作子组件的方法和属性
仅适合传入数据
parents与parents与parents与children方式
可操作父组件或子组件方法及属性，但不推荐
$parent ： 当前组件树的根实例，如果没有则是该组件树本身
用于子组件获取父组件实例并操作父组件属性和方法；
高组件化开发环境下不建议使用，高耦合度，不易复用；
$children:当前实例的直属子组件集合
以数组方式存在，数组内子组件成员可能会因为增减组件导致下标发生偏移；
不保证顺序，非响应式，仅可拿到子组件下标；
若有需要，推荐使用for…of遍历子组件实例；
在需要拿到所有子组件时才用到，日常不建议使用；
$refs与ref方式
用于调用子组件的属性和方法，默认空对象；
最常用；
应该在父组件内给子组件本身添加ref；
this.refs的意义：该vue实例下的有ref标识的子组件的合集，可以直接通过this.refs的意义：该vue实例下的有ref标识的子组件的合集，可以直接通过this.refs的意义：该vue实例下的有ref标识的子组件的合集，可以直接通过this.refs.ref.data/methods来调用子组件数据或方法；
为确保子组件完全挂载完毕，应在mounted生命周期内或者使用this.$nextTick()回调来操作子组件的方法或属性；
语法： this.$refs.ref
二：非父子组件传值
$root： 访问VUE根组件
略略略
$emit 与 $on
该方法可以直接实现两个页面间传值，而不拘泥于是否是父子关系
该方式需要新建一个js文件作为载体， 由该文件对象负责传递数据；
// 公共文件 pub.js
import Vue from ‘vue’
let pub = new Vue()
export default pub
//至此，公共文件创建完毕
假设页面a发送数据，页面b接收数据：
页面a，页面b均需要导入文件pub.js
//页面a
import Pub from ‘…/utils/public.js’
export default {
data(){
pageA:‘我是页面a的数据’
},
methods:{
emitPub(){
Pub.$emit(‘goThere’,pageA)
}
}
}
//页面b
import Pub from ‘…/utils/public.js’
export default {
data(){
pageB:’’
},
mounted(){
//需要在组件加载完毕后使用
//res： 页面a发射的数据
Pub.$on(‘goThere’,res=>{
this.pageB = res
})
}
}
龙华大道1号/LongHuaDaDao1Hao/index.html
