vue组件间传值详解

2023年1月31日11:57:34
1.父传子----传值要点:
《1》
在组件注册的时候必须要使用 return 去返回 data对象;
vue组件间传值详解
《2》
把父级的数据传递给子集; props;
vue组件间传值详解
《3》
子集要允许父级传递的数据。 用 props接受一下数据的传递;
vue组件间传值详解
 
2.子传父
《第一种方法:终极保命方法》:
父组件里的数据直接写在一个对象里,把这个地址传给子组件,因为地址是不会变的,所有在子组件里改这个地址里的数据,那么这个地址里的数据就被改变了,那么子组件的值就传递给了父组件,也就是说让父组件和子组件共享一个数据地址;
vue组件间传值详解
vue组件间传值详解
 
《第二种方法---ref链》:
组件内部的this指向这个组件本身,组件的根root指向Vue实例;根root中children是Vue下的组件;调动组件时,给父组件加的ref属性将挂载到Vue实例上
    
vue组件间传值详解
vue组件间传值详解
vue组件间传值详解
 
注: refs一个对象,持有注册过 ref 特性 的所有 DOM 元素和组件实例。
 
《第三种方法》
在父组件定义一个函数,传给子组件该函数,子组件将数据作为该函数的参数调用,通过该函数就传递了子元素的数据,从而达到了子组件向父组件传值的目的。
示例:
vue组件间传值详解
 
vue组件间传值详解
vue组件间传值详解
 
 
《第四种方法----在第三种方法的基础上进行简化,不需要用props接收,而用emit接收父组件传来的函数》
 
vue组件间传值详解
vue组件间传值详解
vue组件间传值详解
 
emit可以直接调用父组件传来的函数,第一个参数是函数名字,第二个参数是子元素传进去的参数。
 
 
同级组件之间的传值-----事件总线:
Vue实例化里面有个_events,是储存自定义事件的地方,用
的方式可以把自定义事件存储到里面;
利用这个特性可以实现同级组件之间的传值;
vue组件间传值详解
vue组件间传值详解
 

转载于:https://www.cnblogs.com/tengfeiS/p/9985557.html

  • 作者:weixin_34161032
  • 原文链接:https://blog.csdn.net/weixin_34161032/article/details/93352516
    更新时间:2023年1月31日11:57:34 ,共 698 字。