Vue2.0组件之间传值、通信的多种方式(干货)

在Vue.js中，组件间的通信是一个非常重要的话题。本篇文章将详细介绍Vue2.0中的组件通信方式，以及针对不同场景使用哪种方式更为适合。

props和$emit事件

Vue.js中常用的父组件向子组件传递数据的方式就是通过props属性。在父组件中，我们可以使用v-bind指令将数据传递给子组件，如下所示：

<!-- 父组件 -->
<template>
  <div>
    <child :message="msg"></child>
  </div>
</template>

<script>
import Child from './Child.vue'

export default {
  name: 'Parent',
  components: {
    Child
  },
  data () {
    return {
      msg: 'Hello World!'
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  name: 'Child',
  props: {
    message: {
      type: String,
      default: ''
    }
  }
}
</script>

子组件通过 props 接收到了父组件传递的 message 值，进而渲染到了页面上。

此外，我们也可以通过 $emit事件 实现子组件向父组件传递数据。在子组件中，我们可以通过 this.$emit() 触发一个自定义事件，并且将数据传递给父组件。而父组件则可以通过v-on指令绑定这个自定义事件，并接收子组件传递的数据。

<!-- 父组件 -->
<template>
  <div>
    <child @callback="onChildMsg"></child>
  </div>
</template>

<script>
import Child from './Child.vue'

export default {
  name: 'Parent',
  components: {
    Child
  },
  data () {
    return {
      msg: ''
    }
  },
  methods: {
    onChildMsg (data) {
      this.msg = data
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <button @click="handleClick">Click me</button>
</template>

<script>
export default {
  name: 'Child',
  methods: {
    handleClick () {
      this.$emit('callback', 'Hello World!')
    }
  }
}
</script>

$parent、$children和$refs

在Vue.js中，我们也可以通过父组件引用子组件的方式来进行通信。而这种方式则需要使用到Vue.js中的三个特殊属性：$parent、 $children和 $refs。

• $parent 属性：可以访问当前组件的父组件实例。
• $children 属性：可以访问当前组件的子组件实例，返回的是一个数组。
• $refs 属性：可以访问当前组件内所有含有 ref 属性的元素或子组件。

例如，我们可以在父组件中通过 $refs 属性引用子组件的实例，并直接调用其方法或属性：

<!-- 父组件 -->
<template>
  <div>
    <child ref="myChild"></child>
  </div>
</template>

<script>
import Child from './Child.vue'

export default {
  name: 'Parent',
  components: {
    Child
  },
  mounted () {
    this.$refs.myChild.myMethod()
  }
}
</script>

<!-- 子组件 -->
<script>
export default {
  name: 'Child',
  methods: {
    myMethod () {
      console.log('Hello World')
    }
  }
}
</script>

Event Bus

Event Bus（事件总线）是一种比较灵活和简单的组件通信方式。我们可以使用桥接某种事件来在不同组件之间传递信息。

在Vue.js中，我们可以使用一个空的vue实例作为桥接对象来进行事件的监听和触发。我们可以在这个vue实例上定义自定义事件，并在不同的组件中使用该实例监听或触发事件。

// event-bus.js

import Vue from 'vue'

export default new Vue()

<!-- 父组件 -->
<template>
  <div>
    <button @click="changeState">Change State</button>
  </div>
</template>

<script>
import Event from './event-bus.js';

export default {
  name: 'Parent',
  data () {
    return {
      state: false
    }
  },
  methods: {
    changeState () {
      this.state = !this.state
      Event.$emit('test', this.state)
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>{{ state }}</div>
</template>

<script>
import Event from './event-bus.js';

export default {
  name: 'Child',
  data () {
    return {
      state: false
    }
  },
  mounted () {
    Event.$on('test', this.handleTest)
  },
  methods: {
    handleTest (data) {
      this.state = data
    }
  }
}
</script>

Vuex

当应用变得庞大复杂时，上述的组件通知方式会变得难以维护和管理。Vuex则为我们提供了一种比较理想的解决方案。

Vuex是一个专为 Vue.js 应用程序开发的状态管理模式。它对我们的组件通知方式的管理变得更加的集中，且方式更加规范。

State 代表应用程序状态的单一对象或值。在vue中，我们可以使用Vuex来进行统一状态的管理，不同组件之间的通信也将在Vuex的状态下进行统一管理。具体信息参见 Vuex 文档。

// ./store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    },
    decrement (state) {
      state.count--
    }
  }
})

<!-- 父组件 -->
<template>
  <div>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
    <span>{{ count }}</span>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  name: 'Parent',
  computed: mapState({
    count: state => state.count
  }),
  methods: mapMutations([
    'increment',
    'decrement'
  ])
}
</script>

<!-- 子组件 -->
<template>
  <div>{{ count }}</div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'Child',
  computed: mapState({
    count: state => state.count
  })
}
</script>

以上就是Vue2.0组件间传递数据通信的多种方式，我们可以根据不同场景来选择相应的通信方式。