组件之间的数据共享——Vue.js 2.0 全面指南

前端

2023-12-06 02:26:27

🤟🏼 冇事来学系——Vue2.0 中组件之间的数据共享

引言

在 Vue.js 2.0 中，组件化开发是构建复杂应用程序的关键。组件是可重用的代码块，用于封装特定功能或 UI 元素。数据共享是组件之间协作的关键，本文将深入探讨 Vue.js 中组件之间数据共享的不同方法。

父子组件数据传递

父子组件数据共享是最常见的场景。父组件可以向子组件传递数据，反之亦然。

父组件向子组件传递数据

父组件向子组件传递数据主要通过自定义属性实现。父组件在使用子组件时，指定自定义属性，并将数据绑定到该属性。子组件通过 props 选项接收这些属性。

<template>
  <child-component :message="message"></child-component>
</template>

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

<template>
  <p>{{ message }}</p>
</template>

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

子组件向父组件传递数据

子组件向父组件传递数据需要通过事件。子组件触发事件，父组件监听该事件并接收数据。

<template>
  <button @click="emitMessage">Send message</button>
</template>

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

<template>
  <child-component @message="handleMessage"></child-component>
</template>

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

事件总线

事件总线是一种全局事件系统，允许组件在不直接关联的情况下进行通信。组件可以订阅或发布事件，并在特定事件触发时执行操作。

<template>
  <event-bus @message="handleMessage"></event-bus>
</template>

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

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

<template>
  <button @click="emitMessage">Send message</button>
</template>

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

export default {
  components: { EventBus },
  methods: {
    emitMessage() {
      EventBus.$emit('message', 'Hello from child!')
    }
  }
}
</script>

状态管理库

状态管理库，例如 Vuex，提供了一种集中式管理应用程序状态的方法。组件可以通过 mapState 和 mapMutations 选项访问和修改存储在状态管理库中的数据。

<template>
  <div>{{ message }}</div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState(['message'])
  }
}
</script>

<template>
  <button @click="increment">+</button>
</template>

<script>
import { mapMutations } from 'vuex'

export default {
  methods: {
    ...mapMutations(['increment'])
  }
}
</script>