一、父子组件传值

1、父传子

（1）props

父组件向子组件传值，可以通过绑定属性传值；子组件通过props接收父组件传值。
父组件：

<div class="animal">
   <h2>动物</h2>
   <Bird :name="name1" :age="age1" ></Bird>
</div>

data() {
    return {
        name1:'大雁',
        age1:20
    }
}

子组件：

<div class="animal">
  <h2>动物</h2>
  <div>名称：{{name}}</div>
  <div>年龄：{{age}}</div>
</div>

// 接收父组件传值
props: ["name", "age"]

（2）$attrs

父级传过来的数据，子级如果没有用props去接，这些属性会保存到$attrs对象中。

//通过props接收父组件传过来的值
props:['name','age','updateHomeAddress'],
mounted() {
    // 父级传过来的数据，子级如果没有用props去接，这些属性会保存到$attrs对象中
    console.log(this.$attrs);
},
data() {
    return {
        myName:this.name,
        myAge:this.age,
        mySex:this.$attrs.sex,
        myAddress:this.$attrs.address
    }
},
methods: {
    //修改地址
    updateAddress(){
        //修改当前组件的地址
        this.myAddress = '北京'
        //调用父级传过来的方法，修改父级的地址
        this.updateHomeAddress('北京')
    }
}

2、子传父

子组件通过$emit触发一个自定义事件，将更新的数据传给父组件。
子组件：

<div class="bird">
  <h2>鸟类</h2>
  <div>名称：{{ myName }}</div>
  <div>年龄：{{ myAge }}</div>
  <button @click="updateData">修改信息</button>
</div>

props: ["name", "age"],
data() {
  return {
    myname: this.name,
    myage: this.age,
  };
},
methods: {
  updateData() {
    this.myname = "仙鹤";
    this.myage = 10;
    this.$emit("updateData", {name: this.myname,age: this.myage});
  }
}

父组件：

<div class="animal">
   <h2>动物</h2>
   <div>名称：{{name1}}</div>
   <div>年龄：{{age1}}</div>
   <Bird :name="name1" :age="age1" @updateData="updateData"></Bird>
</div>

data() {
    return {
        name1:'大雁',
        age1:20
    }
},
methods: {
  // 该方法，修改name1和age1数据
  updateData(e) {
    this.name1 = e.name;
    this.age1 = e.age;
  }
}

二、祖孙组件传值

首先祖先给子孙后代传值也是可以用props传递，一层层传递，如果嵌套了五六层，这种方法就显得很繁琐。
所以就用到了provide(提供)和inject(注入)。这两个是配套使用的，以允许祖先向所有祖先后代注入一个依赖。祖先组件通过provide添加依赖数据，它里面定义的数据，后代组件可以通过inject选择性注入并直接使用。
注意：后代组件通过inject注入祖级组件中的依赖数据，跟props一样，接收的数据是只读的，不能修改。

祖先组件：

<div class="animal">
  <div>名称：{{ name2 }}</div>
  <div>年龄：{{ age2 }}</div>
  <Bird :name="name1" :age="age1" ></Bird>
</div>

data() {
  return {
    name2: "小明",
    age2: 5
  };
}
// 添加依赖数据，它里面定义的数据，子组件可以选择性注入并直接使用。
provide() {
  return {
    doveName: this.name2,
    doveAge: this.age2,
    // 将修改name2和age2的方法，设置为依赖数据
    updateDove: this.updateDove,
  };
},
methods: {
  updateDove(dove) {
    this.name2 = dove.name;
    this.age2 = dove.age;
  },
}

后代组件：

<div class="dove">
  <h2>鸽子</h2>
  <div>名称：{{ mydoveName }}</div>
  <div>年龄：{{ mydoveAge }}</div>
  <button @click="updateData">修改数据</button>
</div>

// 从父级组件中注入依赖的数据
inject: ["doveName", "doveAge", "updateDove"],
data() {
  return {
    mydoveName: this.doveName,
    mydoveAge: this.doveAge,
  };
},
methods: {
  updateData() {
    this.mydoveName = "小红";
    this.mydoveAge = 8;
    // 执行父级组件中的updateDove方法
    this.updateDove({ name: this.mydoveName,age: this.mydoveAge, });
  }
}

三、兄弟组件传值

在Vue的原型对象上，添加一个$bus属性，该属性的的属性值是一个Vue实例。Vue的所有实例，都将共用同一个$bus。这个$bus属性，我们称之为：中央事件总线。
vm.$emit( eventName, […args] )：触发当前实例上的事件。附加参数都会传给监听器回调。
vm.$on( event, callback )：监听当前实例上的自定义事件。事件可以由 vm.$emit 触发。回调函数会接收所有传入事件触发函数的额外参数。
vm.$once( event, callback )：监听一个自定义事件，但是只触发一次。一旦触发之后，监听器就会被移除。
vm.$off( [event, callback] )：移除自定义事件监听器。

main.js文件：

Vue.prototype.$bus = new Vue()

兄弟A鸽子组件：
点击鸽子组件中的‘修改乌鸦数据’按钮，可以修改乌鸦组件页面的数据。

<div class="dove">
  <h2>鸽子</h2>
  <button @click="updateCrow">修改乌鸦数据</button>
</div>

methods: {
  updateCrow() {
    this.$bus.$emit("updateCrow", { name: "小黄", age: 20 });
  }
}

兄弟B乌鸦组件：

<div class="crow">
  <h2>乌鸦</h2>
  <div>名称：{{ name }}</div>
  <div>年龄：{{ age }}</div>
</div>

data() {
  return {
    name: "小刘",
    age: 20,
  };
},
mounted() {
  // 监听updateCrow事件，当该事件触发时，会执行对应的回调函数
  this.$bus.$on("updateCrow", (e) => {
    this.name = e.name;
    this.age = e.age;
  });
}