vue组件间通信方式

前言：

本文主要讲述了vue组件通信的几种方式，分为父子间通信和兄弟组件间通信两大类分别介绍，如有补充或有误的地方，可随时滴滴我哦~

一、父子组件通信

1、props + $emit（常用）

（1）父向子传参

父组件parent.vue：

引入子组件，通过v-bind传参

<template>
    <div class="myVue">
        <children :data="msg"></children>
    </div>
</template>
<script>
import children from './children'
export default {
  name: 'parent',
  data () {
    return {
      msg: '父传子'
    }
  },
  components: {
    children
  }
}
</script>

子组件children.vue

通过props引入所传参数

<template>
 <div>{
  {data}}</div>
</template>

<script>
export default {
  data () {
    return {
    }
  },
  props: ['data']
}
</script>
<style lang="less" scoped>
  div {
    font-size: 40px;
  }
</style>

props还可以对参数进行验证：

 props: {
      data: {
          type: String,   // 传入类型
          required: true, // 是否必须
          default: ''     // 默认值
      } 
  }

（2）子向父传参

子组件：children.vue

通过v-on绑定的函数，在函数里用 this.$emit 传参

<template>
 <div @click="func">点击向父组件传参</div>
</template>

<script>
export default {
  data () {
    return {
      msg: '子向父'
    }
  },
  methods: {
    func () {
      this.$emit('funcParent', this.msg)
    }
  }
}
</script>
<style lang="less" scoped>
  div {
    font-size: 40px;
  }
  div:hover {
    cursor: pointer;
  }
</style>

父组件：parent.vue

通过v-on接受传进来的函数，并在自定义函数中接受参数

<te