在 Vue 中组件之间传递数据的方法概述

简介

众所周知，Vue 是基于组件来构建 web 应用的，组件将模块和组合发挥到了极致。Vue 虽说吸取了 AngularJs 的 MVVM 的思想，但它是单向数据流的，也就是说子组件无法直接改变父组件状态。下面总结出常用的组件消息传递的方式。

props

props 是 Vue 中最常见的一种组件间数据传递方式，它允许父组件向子组件传递数据。父组件通过 props 向子组件传递数据，子组件通过 props 接收数据。

<!-- 父组件 -->
<template>
  <ChildComponent :message="message" />
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
}
</script>

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

<script>
export default {
  props: ['message']
}
</script>

事件

事件是另一种常用的组件间数据传递方式，它允许子组件向父组件传递数据。子组件通过事件向父组件发送数据，父组件通过事件监听器接收数据。

<!-- 父组件 -->
<template>
  <ChildComponent @message="handleMessage" />
</template>

<script>
export default {
  methods: {
    handleMessage(message) {
      console.log(message)
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <button @click="handleClick">发送消息</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('message', 'Hello Vue!')
    }
  }
}
</script>

Vuex

Vuex 是一个用于管理 Vue 应用中全局状态的工具。它是一个集中式存储，可以让所有的组件访问到同一个状态。组件可以通过 Vuex 来共享数据。

// Vuex store
import Vuex from 'vuex'

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})

// 父组件
export default {
  computed: {
    count() {
      return this.$store.state.count
    }
  },
  methods: {
    increment() {
      this.$store.commit('increment')
    }
  }
}

// 子组件
export default {
  computed: {
    count() {
      return this.$store.state.count
    }
  }
}

provide/inject

provide/inject 是 Vue 2.2.0 引入的一种组件间数据传递方式，它允许祖先组件向其所有子孙组件传递数据。祖先组件通过 provide 向子孙组件提供数据，子孙组件通过 inject 接收数据。

// 祖先组件
export default {
  provide() {
    return {
      message: 'Hello Vue!'
    }
  }
}

// 子孙组件
export default {
  inject: ['message'],
  render() {
    return <div>{ this.message }</div>
  }
}

总结

以上就是 Vue 中常用的组件间数据传递方式，它们都有各自的优缺点，在实际开发中可以根据具体场景选择合适的方式。

方式	优点	缺点
props	简单易用，性能好	子组件无法修改父组件状态
事件	子组件可以主动向父组件传递数据	父组件需要监听子组件的事件
Vuex	实现全局状态管理，多个组件可以共享数据	代码复杂度较高，学习成本高
provide/inject	祖先组件可以向所有子孙组件传递数据	子孙组件无法修改祖先组件状态