vue组件传值有什么方法
这篇文章主要为大家展示了“vue组件传值有什么方法”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“vue组件传值有什么方法”这篇文章吧。
成都创新互联公司是一家业务范围包括IDC托管业务,网站空间、主机租用、主机托管,四川、重庆、广东电信服务器租用,四川移动机房托管,成都网通服务器托管,成都服务器租用,业务范围遍及中国大陆、港澳台以及欧美等多个国家及地区的互联网数据服务公司。
vue组件传值的五种方法:1、父组件向子组件进行传值;2、子组件向父组件进行传值;3、相邻兄弟组件间进行传参;4、远兄弟组件间进行传参;5、EventBus传参。
本教程操作环境:windows7系统、vue2.9.6版,DELL G3电脑。
Vue的通信方式,也可以说是传参方式:
父组件向子组件进行传值:
子组件向父组件进行传值:
相邻兄弟组件间进行传参(亲兄弟)
远兄弟传参(表兄弟)
EventBus传参
一、父子传参
原理:父控制子,通过子组件的props属性,抛出子组件自定义标签属性,来接收父组件的操作状态
例子:父级里的一个按钮,控制子组件里的一个p的显示隐藏
Document
我是子组件的div
效果:
二、子父传参
原理:子控制父,子组件绑定自定义事件,来处理父组件的方法函数,通过.$emit(‘自定义事件’,[参数])来触发属于自己的自定义事件
例子:子组件里一个按钮,控制父组件里的一个p的显示隐藏
Document father显示/隐藏
效果:
三、相邻兄弟传参(亲兄弟)
原理:通过一个公有的父元素作为桥接(实例 组件),结合父子props 传参 、子父自定义事件
例子:c1、c2是兄弟关系 c1可用控制c2里元素的显示隐藏
Document 父级状态{{state}}
这里是c1组件这里是c2组件,状态:{{test_c2}}我是c2中的div
效果:
四、远兄弟传参(表兄弟)
原理:通过创建一个中间实例,注册一个事件,在被控组件中,通过事件携带要执行的函数,在主控组件中,通过事件,改变相应的操作
Document 这是父组件
{{name}}{{name}}
效果:
点击前:
点击后:
五、EventBus传参
1.在main.js种挂载全局EventBus
Vue.prototype.$EventBus = new Vue()
2.A组件
我是组件A
3.B组件
我是组件B
通过挂载全局Vue对象传递参数。
以上是“vue组件传值有什么方法”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
本文标题:vue组件传值有什么方法
当前路径:http://pwwzsj.com/article/pcosej.html