Vue组件间通信方式全面汇总介绍

下面我将详细讲解“Vue组件间通信方式全面汇总介绍”的完整攻略。

1. 前言

在Vue的开发中，组件间通信是很常见的需求。要想做好组件间通信，我们必须要掌握不同的组件通信方式。本篇文章将全面汇总介绍Vue组件间通信的方式，希望能够对Vue的学习者有所帮助。

2. 父子组件通信

2.1 父传子

父组件向子组件通信，可以通过props属性来传递。具体实现方法如下：

// 父组件
<template>
  <child :msg="msg"></child>
</template>
<script>
import Child from './Child.vue'
export default {
  components: {
    Child
  },
  data() {
    return {
      msg: 'Hello World!'
    }
  }
}
</script>

// 子组件
<template>
  <div>{{msg}}</div>
</template>
<script>
export default {
  props: {
    msg: {
      type: String,
      default: ''
    }
  }
}
</script>

2.2 子传父

子组件向父组件通信，可以通过$emit方法来触发自定义事件，父组件通过v-on来监听子组件的事件并作出相应的处理。具体实现方法如下：

// 子组件
<template>
  <button @click="handleClick">点击</button>
</template>
<script>
export default {
  methods: {
    handleClick() {
      this.$emit('my-event', '子组件传递的数据')
    }
  }
}
</script>

// 父组件
<template>
  <child @my-event="handleMyEvent"></child>
</template>
<script>
import Child from './Child.vue'
export default {
  components: {
    Child
  },
  methods: {
    handleMyEvent(data) {
      console.log(data) // 子组件传递的数据
    }
  }
}
</script>

3. 兄弟组件通信

3.1. 兄弟组件通信（非父子组件）

如果要实现非父子组件间的通信，可以使用事件总线（bus）。具体实现方法如下：

// 创建一个新的bus.js文件
import Vue from 'vue'
export default new Vue()

// 组件1
<script>
import bus from './bus.js'
export default {
  methods: {
    handleClick() {
      bus.$emit('my-event', '组件1传递的数据')
    }
  }
}
</script>

// 组件2
<script>
import bus from './bus.js'
export default {
  data() {
    return {
      msg: ''
    }
  },
  mounted() {
    bus.$on('my-event', data => {
      this.msg = data
      console.log(this.msg) // 组件1传递的数据
    })
  }
}
</script>

4. 跨级组件通信

4.1. 祖先组件向后代组件通信

祖先组件向后代组件通信，我们可以使用provide和inject。provide和inject使用起来很方便，由祖先组件提供数据，后代组件通过inject来注入数据。具体实现方法如下:

// 祖先组件
<template>
  <grand-child></grand-child>
</template>
<script>
import GrandChild from './GrandChild.vue'
export default {
  components: {
    GrandChild
  },
  provide() {
    return {
      text: '我是祖先组件提供的数据'
    }
  }
}
</script>

// 子组件
<template>
  <child></child>
</template>
<script>
import Child from './Child.vue'
export default {
  components: {
    Child
  }
}
</script>

// 孙子组件
<template>
  <div>{{text}}</div>
</template>
<script>
export default {
  inject: ['text']
}
</script>

4.2. 后代组件向祖先组件通信

后代组件向祖先组件通信，我们可以使用$parent。$parent的用法和DOM元素的parentNode相似，可以获取到当前组件的父组件实例，从而可以调用其方法。具体实现方法如下：

// 孙子组件
<template>
  <button @click="handleClick">点击</button>
</template>
<script>
export default {
  methods: {
    handleClick() {
      this.$parent.someMethod()
    }
  }
}
</script>

// 祖先组件
<template>
  <child></child>
</template>
<script>
import Child from './Child.vue'
export default {
  components: {
    Child
  },
  methods: {
    someMethod() {
      console.log('我是祖先组件的方法')
    }
  }
}
</script>

5. 总结

本文介绍了Vue组件间通信方式全面汇总，包括了父子组件通信、兄弟组件通信、跨级组件通信。各种通信方式各有优缺点，需要根据实际情况选择适当的方式。希望本文对Vue的学习者有所帮助。