Vue 组件传值终极指南：轻松搞定跨级、父子和兄弟组件数据传递

2022-11-04 23:09:12

Vue.js 中的组件传值：轻松实现数据交互

什么是 Vue.js 中的组件传值？

Vue.js 是一种流行的前端框架，它允许你将复杂的用户界面分解为可重用的组件。组件传值是组件之间共享和交互数据的一种机制。通过有效地传递数据，你可以构建出交互式和可维护的 Vue.js 应用程序。

父子组件传值

父子组件传值是最直接的数据传递方式。父组件可以使用 props 属性将数据传递给子组件，子组件可以通过 this.props 访问这些数据。

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

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

// 子组件
<template>
  <p>{{ message }}</p>
</template>

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

兄弟组件传值

兄弟组件传值是两个平级组件之间的数据传递。可以使用事件来实现兄弟组件传值。一个组件触发事件，另一个组件监听并处理该事件。

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

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

// 组件 B
<template>
  <p>{{ message }}</p>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  methods: {
    handleMessage(message) {
      this.message = message
    }
  },
  mounted() {
    this.$on('message', this.handleMessage)
  }
}
</script>

跨级组件传值

跨级组件传值是两个非父子组件之间的数据传递。可以使用 Vuex 状态管理库、provide/inject 或事件总线来实现跨级组件传值。

Vuex

Vuex 是一种状态管理库，它可以存储和管理应用程序中的共享数据。通过使用 Vuex，你可以将需要在多个组件之间共享的数据存储在 Vuex 的 store 中。

// Vuex store
export default new Vuex.Store({
  state: {
    message: 'Hello, Vue!'
  }
})

// 父组件
<template>
  <ChildComponent />
</template>

<script>
export default {
  computed: {
    message() {
      return this.$store.state.message
    }
  }
}
</script>

// 子组件
<template>
  <p>{{ message }}</p>
</template>

<script>
export default {
  computed: {
    message() {
      return this.$store.state.message
    }
  }
}
</script>

provide/inject

provide/inject 是一种提供跨级组件数据传递的方式。父组件使用 provide 方法提供数据，子组件使用 inject 方法注入数据。

// 父组件
<template>
  <ChildComponent />
</template>

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

// 子组件
<template>
  <p>{{ message }}</p>
</template>

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

事件总线

事件总线是一种跨级组件通信的简单方式。父组件触发事件将数据传递给事件总线，子组件监听并处理该事件。

// 事件总线
export const eventBus = new Vue()

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

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

// 子组件
<template>
  <p>{{ message }}</p>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  mounted() {
    eventBus.$on('message', (message) => {
      this.message = message
    })
  }
}
</script>