vue组件通讯:子传父,父传子,兄弟之间的数据传递

210 阅读1分钟

一·父组件向子组件传递数据,通过属性绑定的形式

1,在子组件标签上添加一个属性,例如 2.在子组件中通过props属性来接收这个数据,注意props是一个数组

components :{

child:{

template:‘

我是子组件 ’, props:【‘age’】

}

}

3.最后就可以在子组件的模板中使用父组件传递过来的数据了

components :{

child:{

template:‘

我是子组件------{{ age }}

’,

props:【‘age’】

}

}

props的”双向绑定“:原理就是父组件为子组件准备了一个数据,子组件通过props拿到数据,因为props里的数据不能修改,父组件里的数据可以修改,所以父组件需要一个方法去支持修改数据,然后子组件通过$emit方法触发这个事件,把修改的数据传递过去,然后父组件里面的数据修改了,那么props的数据也跟着改了

1.给属性添加.sync修饰符 2.通过$emit触发一个特殊形式的事件 事件名称:updata + props属性的名称

二:子组件向父组件传递数据,通过自定义事件通过参数传递过去 1.父组件提供一个方法

2.给子组件自定义事件,它的值是父组件提供的方法的名称

3.然后在子组件中注册一个事件,用this.$emit(‘自定义事件的名称’,数据)来触发父组件中传递过来的方法

三.兄弟组件之间的通讯,通过一个bus来传递数据 1,创建一个空的vue实例,也就是bus(事件总线)

2,接受数据的组件通过bus.$on(‘事件名称’,( data ) =>{ } )事件来接受数据

3.发送数据方通过bus.$emit(‘事件名称’,‘发送的数据’)

单项数据流:父组件中的数据可以通过props流动到子组件中,并且当父组件中的数据发生改变的时候,子组件会紫红接受到改变后的数据,并且更新子组件中的内容,所以数据一般由父组件提供。