vue组件间传值详解

1.父传子----传值要点：

《1》

在组件注册的时候必须要使用 return 去返回 data对象;

《2》

把父级的数据传递给子集; props;

《3》

子集要允许父级传递的数据。 用 props接受一下数据的传递;

 

2.子传父

《第一种方法：终极保命方法》：

父组件里的数据直接写在一个对象里，把这个地址传给子组件，因为地址是不会变的，所有在子组件里改这个地址里的数据，那么这个地址里的数据就被改变了，那么子组件的值就传递给了父组件，也就是说让父组件和子组件共享一个数据地址；

 

《第二种方法---ref链》：

组件内部的this指向这个组件本身，组件的根root指向Vue实例；根root中children是Vue下的组件；调动组件时，给父组件加的ref属性将挂载到Vue实例上

    

 

注： refs一个对象，持有注册过 ref特性 的所有 DOM 元素和组件实例。

 

《第三种方法》

在父组件定义一个函数，传给子组件该函数，子组件将数据作为该函数的参数调用，通过该函数就传递了子元素的数据，从而达到了子组件向父组件传值的目的。

示例：

 

 

 

《第四种方法----在第三种方法的基础上进行简化，不需要用props接收，而用emit接收父组件传来的函数》

 

 

emit可以直接调用父组件传来的函数，第一个参数是函数名字，第二个参数是子元素传进去的参数。

 

 

同级组件之间的传值-----事件总线：

Vue实例化里面有个_events，是储存自定义事件的地方，用

的方式可以把自定义事件存储到里面；

利用这个特性可以实现同级组件之间的传值；