全面理解 Vue3 组件传值方法，助力开发提速

2022-11-22 16:09:34

Vue3 组件传值：助力开发提速

在 Vue3 中，组件之间的有效通信对于构建健壮且可维护的应用程序至关重要。组件传值是实现组件通信的关键途径，通过了解和掌握各种组件传值方法，开发人员可以显著提升开发效率和项目质量。

1. Props：数据传输的坚实基础

Props 是 Vue3 中最常用的组件传值方法。它允许父组件向子组件传递数据，这些数据可以是基本类型、对象、数组甚至函数。父组件在组件定义中声明 Props，而子组件则在组件模板中使用 Props 接收数据。

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

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

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

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

2. Event Bus：事件传递的桥梁

Event Bus 是一个全局事件总线，允许组件之间触发和监听事件。组件通过向 Event Bus 触发事件进行通信，其他组件则通过监听该事件来做出响应。Event Bus 促进了组件之间的松散耦合。

// 触发事件的组件
this.$eventBus.$emit('my-event', data)

// 监听事件的组件
this.$eventBus.$on('my-event', data => {
  // 处理事件
})

3. Emit：子组件与父组件通信的利器

Emit 允许子组件向父组件传递数据。子组件通过在组件模板中使用 Emit 方法触发事件，父组件则在组件定义中监听该事件来响应。Emit 促进了子组件与父组件之间的通信。

// 子组件
<template>
  <button @click="emitData">Send data</button>
</template>

<script>
export default {
  methods: {
    emitData() {
      this.$emit('my-event', 'Data from child!')
    }
  }
}
</script>

// 父组件
<template>
  <ChildComponent @my-event="handleData" />
</template>

<script>
export default {
  methods: {
    handleData(data) {
      // 处理从子组件传递的数据
    }
  }
}
</script>

4. attrs 和 listeners：传递任意数据的桥梁

attrs 和 listeners 是特殊属性，允许父组件向子组件传递任意数据。attrs 包含未通过 Props 声明的父组件属性，而 listeners 包含所有以 "on" 开头的事件监听器。子组件可以通过在组件模板中使用 attrs 和 listeners 获取这些数据。

// 父组件
<template>
  <ChildComponent :extra-data="customData" @custom-event="handleEvent" />
</template>

<script>
export default {
  data() {
    return {
      customData: 'Arbitrary data'
    }
  }
}
</script>

// 子组件
<template>
  <p>{{ extraData }}</p>
  <button @click="$emit('custom-event')">Trigger event</button>
</template>

<script>
export default {
  props: {
    extraData: {
      type: String,
      default: ''
    }
  },
  listeners: {
    customEvent: {
      handler: handleEvent
    }
  },
  methods: {
    handleEvent() {
      // 处理自定义事件
    }
  }
}
</script>

5. Provide 和 Inject：跨组件共享数据的秘密武器

Provide 和 Inject 允许跨组件共享数据。父组件通过在组件定义中声明 Provide 提供数据，而子组件则通过在组件定义中使用 Inject 注入数据。Provide 和 Inject 是一种实现组件之间深层嵌套数据共享的有效方法。

// 提供数据的组件
<template>
  <ChildComponent />
</template>

<script>
export default {
  provide() {
    return {
      sharedData: 'Shared data'
    }
  }
}
</script>

// 注入数据的组件
<template>
  <p>{{ sharedData }}</p>
</template>

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

6. Ref：访问子组件实例的利器

Ref 允许父组件访问子组件的实例。父组件可以通过在组件模板中使用 Ref 获取子组件的实例，然后可以调用子组件的方法和访问子组件的属性。Ref 促进了父组件对子组件的控制。

// 父组件
<template>
  <ChildComponent ref="child" />
</template>

<script>
export default {
  mounted() {
    console.log(this.$refs.child)
  }
}
</script>

// 子组件
<template>
  <p>Subcomponent</p>
</template>

<script>
export default {}
</script>

7. Slot：灵活布局组件内容的利器

Slot 允许子组件定义内容，而父组件可以在组件模板中使用 Slot 指定子组件的内容。Slot 提供了灵活的组件布局。

// 父组件
<template>
  <ChildComponent>
    <template #default>
      Custom content
    </template>
  </ChildComponent>
</template>

// 子组件
<template>
  <div>
    <slot></slot>
  </div>
</template>

<script>
export default {}
</script>