vue的组件通讯 父传子 -- 子传父-- 兄弟组件的传值 vue的组件传值

Posted ljjzxx

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue的组件通讯 父传子 -- 子传父-- 兄弟组件的传值 vue的组件传值相关的知识,希望对你有一定的参考价值。

首先文字简单撸一下

父子传子   -------首先在父组件上绑定一个属性,在子组件里用props接收,可以是数组或者是对象

子传父   ------在父组件升上自定义一个方法,在子组件里通过this.$emit("父组件上的方法名",a)     /-------a------/代表需要传递的参数       

兄弟组件通讯   需要创建一个公共的vue 实例, new vue()   

在main.js里 书写Vue.prototype .com=new vue()    通过prototype添加到vue实例中      com是自己添加的属性

1、父传子

技术图片

2、子传父

技术图片

 

3、兄弟组件通讯

兄弟组件1

技术图片

兄弟组件2

技术图片

组件通讯是vue里比较重要,而且常用的东西,需要掌握好

以上是关于vue的组件通讯 父传子 -- 子传父-- 兄弟组件的传值 vue的组件传值的主要内容,如果未能解决你的问题,请参考以下文章

Vue组件 父传子 子传父

vue 组件通信 (子传父 , 父传子 , 兄弟通信)

vue中组件间的通信,父传子,子传父

组件Vue组件之间的通信父传子 | 子传父

vue组件之间互相传值:父传子,子传父

Vue组件间传值(超全,跨代)父传子,子传父,爷传孙,孙传爷,保姆级讲解