vue父子传值与非父子传值

一：父子组件传值

1. props方式

1. $parents与$children方式

 1. $parent ： 当前组件树的根实例，如果没有则是该组件树本身

 2. $children:当前实例的 **直属** 子组件集合

1. $refs与ref方式

二：非父子组件传值

1. $root： 访问VUE根组件

1. $emit 与 $on

// 公共文件 pub.js
import Vue from 'vue'
let pub = new Vue()
export default pub
//至此，公共文件创建完毕

假设页面a发送数据，页面b接收数据：

//页面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
          })
      }
}

以上