24.Vue中父子兄弟组件传递数据

1.子向父组件传递数据（基本方式）

子向父组件传递数据通常有：

（1）通过props

（2）自定义事件v-on绑定自定义事件、$emit触发自定义事件

（3）$bus总线直接共享数据

（4）vuex

（5）消息订阅与发布，如pubsub

这里介绍的子向组件传递数据只使用了vue的props、自定义事件

1.通过props

写法：

        在父组件中定义方法xxxx(params) ，再通过props将xxxx方法传递给子组件，

        如：<son-component :xxxx="xxxx"/>；再在子组件中触发xxxx方法，并将子组件中需要

        传递给父组件的数据携带过去，如：this.sendXxxx(this.params)

2.借助注册自定义事件

写法1：

        在父组件中通过v-on或者@（v-on的简写）方式给子组件注册监听事件，再在子组件中

        通过this.$emit('xxxx',params)触发监听事件，将子组件中的params数据传递给父组

        件中的监听事件xxxx

写法2：

        在父组件中通过this.$refs.子组件绑定的ref名，给子组件注册监听事件，再在子组件中

        通过this.$emit("xxxx",params")触发监听事件，将子组件中的params数据传递给父组件

代码如下：

父组件代码

<template>
  <div class="app">
    <h2>接收到的School组件中的学校名：{{ schoolName }}</h2>
    <h2>接收到的School组件中的学校地址：{{ schoolAddress }}</h2>
    <h2>接收到的School组件中的学校类型：{{ schoolType }}</h2>
    <hr />
    <!-- 通过父组件给子组件传递函数类型的props实现：子给父传递数据:props、$emit -->
    <School ref="school" :getSchoolName="getSchoolName" @getSchoolAddress="getSchoolAddress"></School>
  </div>
</template>

<script>
import School from "./components/School.vue";
export default {
  name: "App",
  components: {
    School
  },
  data() {
    return {
      schoolName: "",
      schoolAddress: "",
      schoolType: ""
    }
  },
  methods: {
    getSchoolName(name) {
      this.schoolName = name
      console.log("App接收到的学校名：",name)
    },
    getSchoolAddress(schoolAddress) {
      this.schoolAddress = schoolAddress
      console.log("App接收到的学校地址：",schoolAddress)
    },
    getSchoolType(schoolType) {
      this.schoolType = schoolType
      console.log("App接收到的学校类型：",schoolType)
    }
  },
  mounted() {
    this.$refs.school.$on("getSchoolType",this.getSchoolType)
  }
}
</script>

子组件代码

<template>
  <div class="school">
    <h2>学校名称：{{ schoolName }}</h2>
    <h2>学校地址：{{ schoolAddress }}</h2>
    <h2>学校类型： {{ schoolType }}</h2>
    <button @click="sendSchoolName">把学校名给App（通过props）</button>
    <button @click="sendSchoolAddress">把学校地址给App（通过$emit）</button>
    <button @click="sendSchoolType">把学校类型给App（通过$refs注册）</button>
  </div>
</template>

<script>
export default {
    name: "School",
    props: ["getSchoolName"],
    data() {
        return {
            schoolName: "xxx学校",
            schoolAddress: "xxxx第xxx号马路",
            schoolType: "大学"
        }
    },
    methods: {
        sendSchoolName() {
            this.getSchoolName(this.schoolName)
        },
        sendSchoolAddress() {
            this.$emit("getSchoolAddress",this.schoolAddress)
        },
        sendSchoolType() {
            this.$emit("getSchoolType",this.schoolType)
        }
    }
}
</script>

<style>

</style>

2.兄弟组件进行数据传递

兄弟组件进行数据传递实际和子组件向父组件传递数据方式一致

（1）通过props将数据传递给父组件，再由父组件传递给子组件（可以通过props）

（2）通过v-on给兄弟组件注册事件，再在兄弟组件中通过$emit传递给父组件，再由父组件

        传递给兄弟组件（可以通过props）

（3）$bus总线直接共享数据

（4）vuex直接共享数据

（5）消息订阅与发布插件，如：pubsub

多余的不再赘述，想详细了解的可以百度