Vue中关于父子组件之间的通信

一、概要

在vue中，父子组件的关系可以总结为prop向下传递，事件向上传递。父组件通过prop给子组件下发数据，子组件通过事件给父组件发送信息。

二、实现方式

1、通过 Prop 向子组件传递数据

如何在组件上注册的一些自定义 attribute，Vue为我们提供了 props 数据选项。我们能够在组件实例中访问这个值，就像访问 data 中的值一样。

• 父组件

  <div>
    <child title="标题"></child>
  </div>

• 子组件

  <div>{{ title }}</div>

  props: {
    title: {
      type: String,
      default: null
    }
  }

  console.log(this.title) // 标题

2、通过 $emit 向父组件发送信息

如何在组件上注册的一些自定义 event，Vue为我们提供了 $on 和 $emit 事件实例方法。

• vm.$on 监听当前实例上的自定义事件。

• vm.$emit 触发当前实例上的自定义事件。

• 回调函数会接收所有传入事件触发函数的额外参数。

   vm.$on('event', function (msg) {
     console.log(msg) // hello
   })
   vm.$emit('event', 'hello')

• 父组件

  <div>
    <child @childEvent="parentEvent"></child>
  </div>

  parentEvent(value){
     console.log(value)  // 我是子组件传递的值
  }

• 子组件

  <div>
    <button @click="handleClick('我是子组件传递的值')">点击触发事件</button>
  </div>

  handleClick(value) {
     this.$emit('childEvent',value)
  }

三、props 配置

props 可以是数组或对象，用于接收来自父组件的数据。

• 基于对象的语法使用以下选项:

选项	值	描述
type	String、Number、Boolean、Array、Object、Date、Function、Symbol、任何自定义构造函数、或上述内容组成的数组	会检查一个 prop 是否是给定的类型，否则抛出警告
default	any	为该 prop 指定一个默认值。如果该 prop 没有被传入，则换做用这个值。对象或数组的默认值必须从一个工厂函数返回。
required	Boolean	定义该 prop 是否是必填项。在非生产环境中，如果这个值为 truthy 且该 prop 没有被传入的，则一个控制台警告将会被抛出。
validator	Function	自定义验证函数会将该 prop 的值作为唯一的参数代入。在非生产环境下，如果该函数返回一个 falsy 的值 (也就是验证失败)，一个控制台警告将会被抛出。

四、其他通信方式

1、通过 Function Prop 向父组件发送信息

父组件通过 在子组件定义 Function 类型的 Prop，传递给子组件一个函数（含参数），子组件通过调用该函数，来传递相应的数据。

• 父组件

  <div>
    <child :parentFunc="parentFunc"></child>
  </div>

  parentFunc(value){
    console.log(value)  //  我是子组件传给父组件的值
  }

• 子组件

  <div>
    <button @click="clickHandle('我是子组件传给父组件的值')">
        点击调用父组件传过来的函数
    </button>
  </div>

  props: {
    parentFunc: {
      type: Function
    }
  },
  methods: {
    clickHandle(value) {
      this.parentFunc(value)
    }
  }

2、通过 $ref 调用子组件方法 向子组件传递数据

通过 $ref 可以获取到子组件的全部信息，包括子组件定义的一些方法，继而可以通过调用子组件方法来传递数据。

• 父组件

  <div>
    <child ref="child"></child>
    <button @click="clickHandle('我是父组件传给子组件的值')">
    	点击调用子组件方法
    </button>
  </div>

  clickHandle(value) {
    this.$refs.child.getValue(value)
  }

• 子组件

  methods: {
    getValue(value){
      console.log(value)  //  我是父组件传给子组件的值
    }
  }

参考地址：

• Vue官网：https://cn.vuejs.org/v2/api/