# vue 父子组件间的传参与调用方法

**Repository Path**: qingyingying/components

## Basic Information

- **Project Name**: vue 父子组件间的传参与调用方法
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2021-01-31
- **Last Updated**: 2023-01-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue 父子组件间的传参与调用方法

### 介绍
主要整理了几种父子组件之间的传参与调用方法的方式


### 传值
#### 父->子

##### 方式1：
###### 父组件

```
<my-components :msg='data'></my-components>
```
###### 子组件

```
props:['msg']
```
##### 方式2：
###### 父组件

```
<my-components ref='mychild' :msg='data'></my-components>

methods:{
    getMsg(){
        this.$reds.mychild.init('msg的值')
    }
}
```
###### 子组件

```
methods:{
    init(msg){
        console.log('msg:',msg)
    }
}
```

#### 子->父

##### 方式1：
###### 父组件

```
<my-components :msg='data' @changeInfo='change'></my-components>

methods:{
    change(msg){
        console.log('data:',msg) //1
    }
}
```
###### 子组件

```
props:['msg']
methods:{
    handleMsg(){
        this.$emit('changeInfo','1')
    }
}
```

#### 父子双向绑定数据

##### 方式1：
###### 父组件

```
<my-components v-model='msg'></my-components>

```
###### 子组件

```
props:['msg'],
model:{
    prop:'msg',
    event:'change'
},
methods:{
    handleMsg(){
        this.$emit('change',msg的值)
    }
}
```
##### 方式2：
###### 父组件

```
<my-components :msg.sync='value'></my-components>

```
###### 子组件

```
props:['msg'],
methods:{
    handleMsg(){
        this.$emit('update:msg',msg的值)
    }
}
```
### 调用方法
#### 父调用子方法

```
<my-components ref='mychild'></my-components>


method:{
    getInfo(){
        this.$refs.mychild.init()//init 为子组件的方法
    }
}

```
#### 子调用父方法

```
this.$parent.init()//init 为父组件的方法
```