Vue - 组件通信（父子单向传递、父子相互传递、祖孙隔代传递）

父组件向子组件单向传递

1. 父组件：引入子组件后，通过属性绑定的形式，将值传入子组件；

`

`

1. 子组件：子组件通过props接收父组件传入的值;
   
   `

   {{sonGetParam}}

`

子组件向父组件单向传递

1. 父组件：引入子组件后，自定义一个用来处理自定义事件的方法，接收子组件传递的值；
   
   `

`

1. 子组件：子组件通过$emit触发自定义事件，将值传递给父组件；
   
   `
   触发事件

`

父组件和子组件相互传递

1. 通过自定义函数的方式
   
   ①. 父组件：
   
   `

`

②. 子组件：

`

<button @click="handleChildEvent">触发事件

`

1. 使用.sync进行双向绑定： 是“v-on:update:参数名”的简化写法
   
   ①. 父组件：
   
   `

`

②. 子组件：使用$emit('update:param');

`

<button @click="handleChildEvent">触发事件

`

爷组件和孙组件隔代传递

1. 适用于vue2.4.0版本以上：
   
   ①. 爷组件：定义处理值的自定义函数 和 接收孙组件传递过来的值的参数，同时将此值传递到孙组件；
   
   `

`

②. 父组件：使用“$attrs.参数名”获取父组件中除了prop传递的属性、class、style的属性；“v-on='$listeners'”获取作用在这个组件上的所有监听器；

<template> <div> <son :param="$attrs.param" v-on="$listeners"></father> </div> </template>

③. 孙组件：通过props获取父组件传递的值；$emit('方法名'， 需要传递的参数) 来触发自定义函数并传递值；

`

{{param}}

<button @click="handleChildEvent">触发事件

`