Vue组件间常用的通信方式

前言

vue组件间的通信是最基础的，也是最重要的知识，在开发中，常用到的组件通信方式有：props与emit、$parent与$children，vuex、以及eventBus，除此之外，还有provide与inject、$attrs与$listeners等。对于向我一样的菜鸟来说，学会用一些常用的通信方式就已经足够了，下面我就来介绍一下这几种vue组件间常用的通信方式。

方法一、props

此方法是父组件A通过props的方式向子组件B传递

接下来我们通过一个例子，说明父组件如何向子组件传递值：在子组件HelloWorld.vue中如何获取父组件App.vue中的数据 msg

//App.vue父组件
<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

//HelloWorld子组件
<template>
  <div class="hello">
    <h1>{
  { msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

总结：父组件通过props向下传递数据给子组件。注：组件中的数据共有三种形式：data、props、computed

 

方法二、$emit

此方法是子组件向父组件传值（通过事件形式）

接下来我们通过一个例子，说明子组件如何向父组件传递值。

// HelloWorld子组件
<template>
  <header>
    <h1 @click="changeTitle">{
  {title}}</h1>//绑定一个点击事件
  </header