宜宾网站建设公司

vue组件传值有什么方法

这篇文章主要为大家展示了“vue组件传值有什么方法”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“vue组件传值有什么方法”这篇文章吧。

成都创新互联公司是一家业务范围包括IDC托管业务,网站空间、主机租用、主机托管，四川、重庆、广东电信服务器租用,四川移动机房托管，成都网通服务器托管,成都服务器租用,业务范围遍及中国大陆、港澳台以及欧美等多个国家及地区的互联网数据服务公司。

vue组件传值的五种方法：1、父组件向子组件进行传值；2、子组件向父组件进行传值；3、相邻兄弟组件间进行传参；4、远兄弟组件间进行传参；5、EventBus传参。

本教程操作环境：windows7系统、vue2.9.6版，DELL G3电脑。

Vue的通信方式，也可以说是传参方式：

  • 父组件向子组件进行传值：

  • 子组件向父组件进行传值：

  • 相邻兄弟组件间进行传参（亲兄弟）

  • 远兄弟传参（表兄弟）

  • EventBus传参

一、父子传参

原理：父控制子，通过子组件的props属性，抛出子组件自定义标签属性，来接收父组件的操作状态
例子：父级里的一个按钮，控制子组件里的一个p的显示隐藏




    
    Document





    
    
        父按钮
        

        
        
    
             
                         我是子组件的div
        
              

效果：

vue组件传值有什么方法

二、子父传参

原理：子控制父，子组件绑定自定义事件，来处理父组件的方法函数，通过.$emit(‘自定义事件’,[参数])来触发属于自己的自定义事件
例子：子组件里一个按钮，控制父组件里的一个p的显示隐藏





Document







         
    
                        
            father显示/隐藏
            
                                  
                  
            子按钮         
    

效果：

vue组件传值有什么方法

三、相邻兄弟传参（亲兄弟）

原理：通过一个公有的父元素作为桥接（实例 组件），结合父子props 传参 、子父自定义事件

例子：c1、c2是兄弟关系 c1可用控制c2里元素的显示隐藏





Document






父级状态

{{state}}











这里是c1组件
c1按钮






这里是c2组件,状态：{{test_c2}}
我是c2中的div

效果：

vue组件传值有什么方法

四、远兄弟传参（表兄弟）

原理：通过创建一个中间实例，注册一个事件，在被控组件中，通过事件携带要执行的函数，在主控组件中，通过事件，改变相应的操作

vue组件传值有什么方法





Document









这是父组件












{{name}}
触发angle中间事件






{{name}}

效果：

点击前：

vue组件传值有什么方法
点击后：

vue组件传值有什么方法

五、EventBus传参

1.在main.js种挂载全局EventBus

Vue.prototype.$EventBus = new Vue()

2.A组件

3.B组件

通过挂载全局Vue对象传递参数。

以上是“vue组件传值有什么方法”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！


当前文章：vue组件传值有什么方法
网站地址：http://ybzwz.com/article/pcosej.html

其他资讯