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

今天，我们来学习下Vue技术小册，用更简单的方式传递大量的props，事例使用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>
复制代码

该组件接收三个参数，分别是 用户姓名、职业、以及爱好。在 template 中把对应的这三个字段值显示出来。然后再父组件中，引入 User组件，声明一个 userInfo对象，然后给 User组件传入这三个参数，如下所示：

<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>
复制代码

运行结果如下：

在这里如果给 User 组件传的参数不止 3 个，那么我们也需要在 User 组件上一个一个去定义吗?显然不怎么高效。

?其实我们可以使用 v-bind 来解决这个问题，它会自动地把所有属性自动绑定到组件作为 props 传递给该组件。 v-bind官方文档：cn.vuejs.org/api/built-i…

改造后：

  <User v-bind="userInfo" />
复制代码

运行，效果如下：

同理，如果 User 组件里有很多的事件要处理，我们也可以使用 v-on来解决这个问题。 首先，我们在 User 组件中自定义两个事件，当点击姓名和爱好时，向父组件发出 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>
复制代码

在父组件中，我们接收这两个事件，并把参数打印出来：

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

  const receiverUserName = (userName: any) => {
    console.log({ userName });
  };
  const receiverUserHobby = (userHobby: any) => {
    console.log({ userHobby });
  };
</script>

<template>
  <!-- <User :name="userInfo.name" :job="userInfo.job" :hobby="userInfo.hobby" /> -->
  <User v-bind="userInfo" @updateUserName="receiverUserName" @updateUserHobby="receiverUserHobby" />
</template>

<style scopedc lang="scss"></style>

复制代码

运行，效果如下：

这里，跟 props 又存在同样的问题，如果 User 里面自定义的事件很多，我们外面 you 懒得一个一个写，那么就可以使用 v-on 来解决这种困境：

<script setup lang="ts">
  import User from 'Components/User.vue';
  import { log } from 'console';
  const userInfo = reactive({
    name: '羊羊羊',
    job: '前端开发工程师',
    hobby: '踢足球、运动跑步'
  });
  
  const userEventHandlers = {
    updateUserName(userName: string) {
      console.table({ userName });
    },
    updateUserHobby(userHobby: string) {
      console.table({ userHobby });
    }
  };
</script>

<template>
  <User v-bind="userInfo" v-on="userEventHandlers" />
</template>

<style scopedc lang="scss"></style>

复制代码

这里，我们定义了一个 userEventHandlers 对象，对象的属性名就是我们 User 组件发出的自定义事件名，最后使用 v-on 绑定了 userEventHandlers. 运行，效果如下：

Tags：console.table

微信扫一扫：分享

微信里点“发现”，扫一下

二维码便可将本文分享至朋友圈。