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

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

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

代码语言：javascript复制

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

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

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

代码语言：javascript复制

<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”对它们进行分组绑定:

代码语言：javascript复制

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

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

开源 bind components 对象 技巧

0 人点赞