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

          })

      }

}

以上