Vue 组件间通讯的方式：通俗易懂指南

2023-12-31 22:41:46

前言

在 Vue.js 中，组件是一种重要的构建块。组件允许我们创建可重用且可维护的代码，并使我们的应用程序更容易组织和管理。组件间通讯是 Vue.js 的一个重要特性，它允许组件之间传递数据和事件。

组件间通讯方式

1. props

props 是 Vue.js 中最基本、最常见的组件间通讯方式。props 允许父组件向子组件传递数据。子组件可以使用这些数据来渲染其模板并更新其状态。

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

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

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

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

2. slots

slots 允许子组件定义其自身的内容，但父组件可以控制这些内容的渲染方式。这允许父组件创建可重用且可定制的组件。

<template>
  <child-component>
    <template v-slot:header>
      <h1>My Header</h1>
    </template>

    <template v-slot:content>
      <p>My Content</p>
    </template>

    <template v-slot:footer>
      <p>My Footer</p>
    </template>
  </child-component>
</template>

<script>
export default {
  components: {
    ChildComponent: {
      template: `
        <div>
          <slot name="header"></slot>
          <slot name="content"></slot>
          <slot name="footer"></slot>
        </div>
      `
    }
  }
}
</script>

3. event bus

event bus 是一个全局事件系统，允许组件之间广播和监听事件。这是一种简单而强大的方式，可以使组件之间进行松散耦合的通信。

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

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

<template>
  <button @click="emitMessage">Emit Message</button>
</template>

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

4. provider/inject

provider/inject 允许组件向其子组件提供数据或函数。子组件可以使用这些数据或函数来渲染其模板并更新其状态。这是一种更强大的组件间通讯方式，但它也更复杂。

<template>
  <provider>
    <child-component></child-component>
  </provider>
</template>

<script>
export default {
  components: {
    Provider: {
      provide() {
        return {
          message: 'Hello world!'
        }
      }
    },
    ChildComponent: {
      inject: ['message'],
      template: `
        <p>{{ message }}</p>
      `
    }
  }
}
</script>

5. v-bind

v-bind 指令允许父组件将数据绑定到子组件的属性。子组件可以使用这些数据来渲染其模板并更新其状态。

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

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

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

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

6. v-on

v-on 指令允许父组件将事件监听器绑定到子组件的方法。子组件可以使用这些事件监听器来响应用户交互。

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

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

<template>
  <button @click="emitMessage">Emit Message</button>
</template>

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