vue父子传值与非父子传值

大概梳理下传值的几种方式

一：父子组件传值

1. props方式

子组件对外暴露方法并向父组件传递由于触发方法导致的值的变化，父组件接收子组件传递来的值；子组件接收父组件传递来的值，并根据传递来的值在子组件内部进行各种操作

弊端：子组件只能接受值，父组件无法获取子组件的方法和属性

仅适合传入数据

1. $parents与$children方式

可操作父组件或子组件方法及属性，但不推荐

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

用于子组件获取父组件实例并操作父组件属性和方法；

高组件化开发环境下不建议使用，高耦合度，不易复用；

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

以数组方式存在，数组内子组件成员可能会因为增减组件导致下标发生偏移；

不保证顺序，非响应式，仅可拿到子组件下标；

若有需要，推荐使用for...of遍历子组件实例；

在需要拿到所有子组件时才用到，日常不建议使用；

1. $refs与ref方式

用于调用子组件的属性和方法，默认空对象；

最常用；

应该在父组件内给子组件本身添加ref；

this.$refs的意义：该vue实例下的有ref标识的子组件的合集，可以直接通过this.$refs.ref.data/methods来调用子组件数据或方法；

为确保子组件完全挂载完毕，应在mounted生命周期内或者使用this.$nextTick()回调来操作子组件的方法或属性；

语法： this.$refs.ref

二：非父子组件传值

1. $root： 访问VUE根组件

略略略

1. $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
          })
      }
}

tips: 经试验，$on的参数二如果是普通函数，this指向会发生错误，因而推荐使用箭头函数(这是由于箭头函数下的this继承了所处函数的上下文环境，妙蛙)

以上