今天,我们来学习下Vue技术小册,用更简单的方式传递大量的props,事例使用Vue3来演示的,当然在Vue2中也适用,投入正题,假设我们有一个用户信息的组件,如下所示:姓名:{{ name }}
职业:{{ job }}
爱好:{{ hobby }}
复制代码 该组件接收三个参数,分别是 用户姓名、职业、以及爱好。在 template 中把对应的这三个字段值显示出来。然后再父组件中,引入 User组件,声明一个 userInfo对象,然后给 User组件传入这三个参数,如下所示:复制代码 运行结果如下: 在这里如果给 User 组件传的参数不止 3 个,那么我们也需要在 User 组件上一个一个去定义吗?显然不怎么高效。 ✨其实我们可以使用 v-bind 来解决这个问题,它会自动地把所有属性自动绑定到组件作为 props 传递给该组件。 v-bind官方文档:cn.vuejs.org/api/built-i… 改造后: 复制代码 运行,效果如下: 同理,如果 User 组件里有很多的事件要处理,我们也可以使用 v-on来解决这个问题。 首先,我们在 User 组件中自定义两个事件,当点击姓名和爱好时,向父组件发出 updateUserName , updeteUserHobby 事件,如下所示: 姓名:{{ name }}
职业:{{ job }}
爱好:{{ hobby }}
复制代码 在父组件中,我们接收这两个事件,并把参数打印出来:复制代码 运行,效果如下: 这里,跟 props 又存在同样的问题,如果 User 里面自定义的事件很多,我们外面 you 懒得一个一个写,那么就可以使用 v-on 来解决这种困境: 复制代码 这里,我们定义了一个 userEventHandlers 对象,对象的属性名就是我们 User 组件发出的自定义事件名,最后使用 v-on 绑定了 userEventHandlers. 运行,效果如下: