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

2020-09-14 252 阅读1分钟

一、父传子：

父组件（parent.vue）data中定义变量 parentData: '我是父组件'；
子组件（child.vue）用接收数据 props: ['childData'] 或者ts写法

props:{
```
 childData:{
 	type: 'String',
 	default: ''
 }
```
}
父组件中引用子组件
- 此时子组件数据不能使用驼峰命名，有些情况不支持，最好使用短横线'-'分割

二、子传父：

子组件定义方法childMethod，用$emit引用传值：

childMethod(){
```
 this.$emit('parentMethod', childData)
```
}
父组件中引用子组件<child @parentMethod="parentMethod">

parentMethod(data){
```
 console.log(data) // 子组件传过来的值childData
```
}

三、孙组件-祖先组件传值（provide+inject）

祖先组件（ancestor.vue）中定义

provide(){
```
 testData: '111'
```
}
后代组件中定义 inject: ['testData'] 即可。