组件间传递数据的奥秘：三种常用方式详解

2023-12-11 23:06:10

在Vue.js应用程序中，组件是构建用户界面的基本单元。它们可以被组合起来创建复杂而强大的应用程序。组件之间的通信是至关重要的，它允许组件共享数据和事件。

父传子（props）

父传子是Vue.js中传递数据最基本的方式。它允许父组件向其子组件传递数据。父组件通过在子组件的标签上声明props属性来实现数据传递。子组件通过在它的data()函数中声明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'],
  data() {
    return {}
  }
}
</script>

在上面的示例中，父组件通过message属性向子组件传递了一个字符串。子组件通过message属性接收这个字符串，并在模板中显示它。

子传父（$emit）

子传父是Vue.js中传递数据另一种常见方式。它允许子组件向其父组件传递数据。子组件通过在它的模板中触发一个自定义事件来实现数据传递。父组件通过在子组件的标签上声明一个事件侦听器来接收数据。

// 子组件
<template>
  <button @click="emitMessage">Send message to parent</button>
</template>

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

// 父组件
<template>
  <child-component @message="onMessage"></child-component>
</template>

<script>
export default {
  methods: {
    onMessage(message) {
      console.log(message) // Hello from child!
    }
  }
}
</script>

在上面的示例中，子组件通过message事件向父组件传递了一个字符串。父组件通过onMessage事件侦听器接收这个字符串，并在控制台中打印它。

兄弟之间传值（eventBus）

兄弟之间传值是Vue.js中传递数据第三种常见方式。它允许兄弟组件之间传递数据。兄弟组件通过创建一个全局事件总线来实现数据传递。组件可以通过在事件总线上触发一个自定义事件来向其他组件传递数据。其他组件可以通过在事件总线上监听这个自定义事件来接收数据。

// 创建全局事件总线
const eventBus = new Vue()

// 组件A
<template>
  <button @click="emitMessage">Send message to component B</button>
</template>

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

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

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