一个更简单的方法来传递大量的props

今天我们就来学习一下Vue技术小册子，用更简单的方式传递大量的道具。这些例子是通过使用Vue3来演示的，这当然也适用于Vue2。让我们言归正传，假设我们有一个用户信息组件，如下所示:

<template>
  <div>
    <p>姓名：{{ name }}</p>
    <p>职业：{{ job }}</p>
    <p>爱好：{{ hobby }}</p>
  </div></template><script setup lang="ts">
  import { ref } from 'vue';

  defineProps({    name: String,    job: String,    hobby: String
  });</script><style scoped></style>

这个组件接收三个参数，即用户名、职业和爱好。这三个字段的相应值显示在模板中。然后，在父组件中，引入用户组件，声明一个userInfo对象，然后将这三个参数传递给用户组件，如下所示:

<script setup lang="ts">
  import User from 'Components/User.vue';  const userInfo = reactive({    name: '羊羊羊',    job: '前端开发工程师',    hobby: '踢足球、运动跑步'
  });</script><template>
  <User :name="userInfo.name" :job="userInfo.job" :hobby="userInfo.hobby" /></template><style scopedc lang="scss"></style>

运行结果如下：

如果这里传递给用户组件的参数超过三个，我们需要在用户组件上逐个定义吗？显然效率不是很高。

其实我们可以用v-bind来解决这个问题。它会自动将所有属性绑定到组件，并作为道具传递给组件。V-bind官方文件:cn.vuejs.org/api/built-i…

转型后:

  <User v-bind="userInfo" />

运行，效果如下：

同样，如果用户组件中有很多事件需要处理，我们也可以使用v-on来解决这个问题。首先，我们在用户组件中自定义两个事件。当点击名字和爱好时，我们向父组件发送updateUserName，updeteUserHobby事件，如下所示:

<template>
  <div>
    <p @click="handleUserName">姓名：{{ name }}</p>
    <p>职业：{{ job }}</p>
    <p @click="handleUserHobby">爱好：{{ hobby }}</p>
  </div></template><script setup lang="ts">
  import { ref } from 'vue';  const props = defineProps({    name: String,    job: String,    hobby: String
  });  // 定义 emit
  const emit = defineEmits(['updateUserName', 'updateUserHobby']);  const handleUserName = () => {
    emit('updateUserName', props.name);
  };  const handleUserHobby = () => {
    emit('updateUserHobby', props.hobby);
  };</script><style scoped></style>复制代码

以下省略，搬运太累

本文链接：https://www.kkkliao.cn/?id=257 转载需授权！