Vue 父子组件传值

 项目中往往会把一些常用的公共代码抽离出来，写成一个子组件。或者在一个页面中的代码太多，可以根据功能的不同抽离出相关代码写成子组件，这样代码结构会更加简洁明了，后续维护更加方便。应用组件的时候就会涉及到组件之间相互传递参数以下进行简单的介绍,vue中的父子组件传值，要注意的是遵守单向数据流原则。所谓单向数据流原则，简单的说就是父组件的数据可以传递给子组件，子组件也可以正常获取并使用由父组件传过来的数据；但是，子组件中不能直接修改父组件传过来的数据，必须要向父组件传递一个事件来父组件需要修改数据，即通过子组件的操作，在父组件中修改数据；这就是单项数据流。

目录

Vue父子传值的方法

1.props / $emit

父传子

子传父

2.$ref

在父组件中定义ref

在父组件中取值：

3.$parent / children

 children 在父组件直接使用进行打印

 parent 在子组件进行调用打印

---

Vue父子传值的方法

在Vue项目进行父子传值主要有以下三种方法：

1. props / $emit                

2. $ref                

3. $parent / children

1.props / $emit

⼦组件中通过定义props接收⽗组件中通过v-bind绑定的数据

父传子

首先在父组件中定义一个data数据

import ChildGroup from "./ChildGroup.vue";// 引入组件
export default {
  components: {
    ChildGroup,// 注册组件
  },
  data() {
    return {
      Text: 111111111111,// 需要传递的值
      Text2: 22222222222,// 需要传递的值
    };
  },
};

在父组件中使用子组件时用 v-bind 定义一个属性并将父组件的 Text Text2 传入

在子组件中使用props接收传入的属性，并可以直接使用

父组件传入子组件的值就被显示出来了:

子传父

首先在子组件中定义一个事件，并且使用emit发送给父组件，在子组件使用的click事件触发发送自定义事件

在父组件中需要定义方法 接受自定义事件 :

2.$ref

ref可以让父组件更加便利地取到想要的子组件，取到组件对象 可以使用值或者方法

在父组件中定义ref

在父组件中取值：

console.log(this.$refs.childs); // 打印组件对象组件对象
console.log(this.$refs.childs.list);  // 直接调用子组件中相应的值

3.$parent / children

 children 在父组件直接使用进行打印

console.log(this.$children[0]);// 打印组件对象组件对象
console.log(this.$children[0].list); // 直接调用子组件中相应的值

 parent 在子组件进行调用打印

console.log(this.$parent); // 打印组件对象组件对象
console.log(this.$parent.Text); // 直接调用父组件中相应的值