vue组件通信传值的几种常用方法

·  阅读 94

一、父传子:

  1. 父组件(parent.vue)data中定义变量 parentData: '我是父组件';

  2. 子组件(child.vue)用接收数据 props: ['childData'] 或者ts写法

    props:{

     childData:{
     	type: 'String',
     	default: ''
     }
    复制代码

    }

  3. 父组件中引用子组件

    • 此时子组件数据不能使用驼峰命名,有些情况不支持,最好使用短横线'-'分割

二、子传父:

  1. 子组件定义方法childMethod,用$emit引用传值:

    childMethod(){

     this.$emit('parentMethod', childData)
    复制代码

    }

  2. 父组件中引用子组件<child @parentMethod="parentMethod">

    parentMethod(data){

     console.log(data) // 子组件传过来的值childData
    复制代码

    }

三、孙组件-祖先组件传值(provide+inject)

  1. 祖先组件(ancestor.vue)中定义

    provide(){

     testData: '111'
    复制代码

    }

  2. 后代组件中定义 inject: ['testData'] 即可。

分类:
阅读
标签: