Vue组件参数的小提议

Authors

Name
Elone Hoo
Me
@elonehoo

不要单独传递大量的属性到一个 vue.js 组件中：

vue

<template>
  <User 
    :name="user.name"
    :profile="user.profile"
    :wechat="user.wechat"
    :local="user.local"
    :framework="user.framework === 'Vue' ? 'Nice' : 'Yes'"
  />
</template>

你可以将一个完整的对象作为组件的 props，自动绑定对象中的所有属性：

vue

<template>
  <User v-bind="user"/>
</template>

如果你有很多事件处理函数，这也适用于 v-on：

vue

<script setup lang="ts">
import { ref } from 'vue'

const user = ref({
  name: 'Elone Hoo',
  profile: 'elonehoo.png',
  wechat: 'elonehoo',
  local: 'https://elonehoo.me',
  framework:'Vue'
})
</script>

有关更多信息，请参阅文档：https://cn.vuejs.org/guide/components/props.html