vue组件通信

父传子

父:自定义属性 + 你要传递的数据

子: props[父组件上的自定义属性名称],进行接收

传递数据的时候注意:

父组件上的自定义属性名称必须是烤串形式

子组件接收的时候props必须是驼峰


子传父:

子:this.$emit('自定义事件名称', 数据)

子组件标签上绑定@自定义事件名称='回调函数'

父:

methods: {

回调函数() {

//逻辑处理

}

}


兄弟:

第一种:先:子传父;后:父传子

第二种:利用空的Vue实例作为中转,使用场景:子父、兄弟、爷孙(多层嵌套)



                                           代码详细解答

 父子通信 

       通过 props 拿到数据


vue组件通信_第1张图片
vue组件通信_第2张图片
vue组件通信_第3张图片
vue组件通信_第4张图片


子父通信


vue组件通信_第5张图片


vue组件通信_第6张图片


兄弟通信



vue组件通信_第7张图片


vue组件通信_第8张图片
vue组件通信_第9张图片

你可能感兴趣的:(vue组件通信)