Vue 高级技巧： Use v-bind to Pass Multiple Props to Components

前端逗逗飞

发布于 2023-10-17 12:34:59

1160

发布于 2023-10-17 12:34:59

Vue 高级技巧： Use v-bind to Pass Multiple Props to Components

将多个 props 绑定到一个 Vue 组件是完全有效的:

<template>
  <Button
    :type="type"
    :color="color"
    :disabled="disabled"
    :test-id="testId"
    :icon="icon"
    @click="onClick"
    @custom="onCustom"
  >
    Login
  </Button>
</template>

但对于更清晰的模板，还可以“v-bind”将包含所有属性信息的对象绑定到组件:

很多开源组件，都采用这种写法

<template>
  <Button v-bind="button">Login</Button>
</template>

<script setup lang="ts">
const button = {
  type: 'submit',
  color: 'blue',
  disabled: false,
  testId: 'login-button',
  icon: 'arrow-right',
}
</script>

如果需要处理大量事件，可能需要使用“v-on”对它们进行分组绑定:

<template>
  <Button v-on="buttonEventHandlers">Login</Button>
</template>

<script setup lang="ts">
const buttonEventHandlers = {
  onClick: () => console.log('Click'),
  onCustom: () => console.log('Custom Event'),
}
</script>

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2023-10-11，如有侵权请联系 cloudcommunity@tencent.com 删除

开源