这是我参与2022首次更文挑战的第14天，活动详情查看：2022首次更文挑战

前言

大家好，我是不吃鱼d猫，路漫漫其修远兮，更文挑战到尾声了，咱还是不能断了更文。今天给大家说说组件通讯。

父传子

props

父组件通过props传递给子组件，是比较简单的一种方法，接下来，我会给一个父组件和子组件来演示props，我们来看

结构在这里

<div class="app">
        <h1>{{title}}</h1>
        <parent></parent>
    </div>

父组件上有数据，name和age,传递给子组件

<template id="parent">
        <div>
            <h1>父元素的数据-{{name}}-{{age}}</h1>
            <input type="text" value="name" v-model="name">
            //在子组件上通过v-bind绑定属性，也就是父组件发送的数据
            <childone :name="name" :age="age"></childone>
        </div>
    </template>

子组件通过 props: ["name", 'age']接收。 props能接收变量，其实也能接收方法，这也就是说，父组件可以传递一个方法给子组件，神奇的是，该方法可以改变父组件里的数据，然后子组件收到了可以改变父组件的属性。所以这也就是子组件用过反向props修改父组件的数据。

ref

ref被用来给元素或子组件注册引用信息，引用信息将会注册在父组件的$refs对象上，如果在普通的DOM元素上使用，引用指向的就是DOM元素，如果在子组件上，引用就指向组件实例。

  <button @click="changeage">点击我修改子元素</button>
            <childone ref="one"></childone>

在父组件上有个方法可以用过ref改变子组件的数据

 methods: {
        changeage() {
        this.$refs.one.age += 5
                    }
            }
                

子改父

反向props

上面我们也说了，其实就是父组件通过props传递一个方法给子组件，并且这个方法可以改变父组件，进而及时子组件改变父组件。比较简单就不演示了。

调用父实例（this.$paent）

这种方式也是很好理解，直接在子组件中调用$parent改变父组件的属性

 methods: {
                changeage() {
                    this.$parent.age += 5
                }
            }

自定义事件

子组件发送emit，父组件接受on
父组件

<template id="parent">
        <div>
            <h1>父元素的数据-{{name}}-{{age}}</h1>
           //父组件接受addage方法
            <childone @addage="addAge"></childone>
        </div>
    </template>

子组件中的方法

 methods: {
            changeAge() {
                //子元素发送事件
                this.$emit("addage", 5)
            }
        }

兄弟改兄弟

子改父三种，父改子两种，那么子改父，父在改另外一个子，这是不是就形成了兄弟改兄弟，那么就是六种。可能有点绕，特别是有种情况，儿子一用过反向props改父，父在通过props改子。我感觉这最绕。不过当然有简单的通用的，就是用过通过事件总线。定义一个空的vue实例，一个emit发送，一个on接受。