Vue 组件实例属性的使用

简介: 前言因为最近面试了二、三十个人,发现大部分都还是只是停留在 Vue 文档的教程。有部分连教程这部分的文档也没看全。所以稍微写一点,让新上手的 Vuer 多了解 Vue 文档的其他更需要关注的点。

前言

因为最近面试了二、三十个人,发现大部分都还是只是停留在 Vue 文档的教程。有部分连教程这部分的文档也没看全。
所以稍微写一点,让新上手的 Vuer 多了解 Vue 文档的其他更需要关注的点。

因为 Vue 文档已经是个很成熟的文档,并且实现的 demo 简洁明了,我就不具体写实现代码了,文内只会贴需要关注的知识的文档地址

v-model

自定义组件上使用 v-model

一般可能会问怎么在自己写的组件上实现 v-model。因为一些同学用多了组件库,用的心安理得,完全不去想为什么组件库可以用 v-model 做各种双向绑定。问到如何自己写的时候直接懵逼了,所以这个是一定要会的。如果能在回答一下子组件可以用 model 属性,让 v-model 不再需要对 value 这个 props 做双向绑定就更好了, 说明你文档看的仔细。

其实 v-model 就是 prop + $emit 的语法糖, 可以拆成 value 和 @input

所以记住拉,如果是简单的子组件要同步数据到父组件,不要再傻傻的 prop + $emit, 在父组件里修改数据了。

本章相关文档链接:

多个属性的双向绑定呢

如果你会用 v-model,那么就要知道 v-model 只能绑定一个属性,如果父组件有多个需要和子组件的做双向绑定的属性怎么办?你可以会想到用对象或者数组。但是这可以会导致操作过于复杂。然而可以用 .async 修饰符完成。

本章相关文档链接:

实例属性

attrs && props

这是个不常用的属性,但是在高级用法里非常常见。比如我把组件库里的多个组件封装一层,成为一个大的业务组件。我用这个大组件的时候需要灵活控制里面组件库的 prop,将参数透传到组件库的组件里。示例如下:


// my-search.vue
<template>
  <el-input v-model='myValue'/>
  <el-button>搜索</el-button>
</template>

// page.vue
<template>
  <my-search placeholder='请输入搜索'></my-search>
</template>

有的小伙伴回答在 my-search 里定义这个 prop ,然后传到 el-input 里。然而他有 20 多个 prop,这样太麻烦了。

有聪明的小伙伴说传个对象进去,然而最后还是没解决怎么把这个对象绑定到 el-input 上。答案已经很接近了。

其实 Vue 已经帮我们把这个对象弄好了,我们只要直接在 el-input 组件上写 v-bind="$attrs"

别忘了 v-bind 可以传对象的啊!!

本章相关文档链接:

listeners

上面搞定了 props 的透传,别忘了还有事件的透传。同理 Vue 已经帮我们弄好了。v-bind="$listeners"

本章相关文档链接:

常用的实例属性

其他我们比较常用的就是 $refs$parent$children$el

不常用的实例属性

$slots$scopedSlots。slots 可以判断父组件里道理传了哪些 slot 进来。其他的大家就去官网文档里看把。

先到这

到这里应该大家能了解到,除了 Vue 文档除了教程章节,API 章节也至关重要。我觉得熟读 Vue 文档,Vue 深度就能达到一定程度。至少面试问 Vue 的话,如果连 API 都不熟,会比较扣分。如果需要更深入了解就去看源码,看优秀的组件库的实现。。

其实我有很多也是从组件库里学到的~ 建议有空多看看你经常使用的组件库源码,至少比 Vue 源码简单多了。。而且更贴合我们的使用场景

来源:https://segmentfault.com/a/1190000017483791

相关文章
|
1天前
|
JavaScript
Vue学习之--------深入理解Vuex之多组件共享数据(2022/9/4)
这篇文章通过一个实际的Vue项目案例,演示了如何在Vuex中实现多组件间共享数据。文章内容包括在Vuex的state中新增用户数组,创建Person.vue组件用于展示和添加用户信息,以及在Count组件中使用Person组件操作的数据。通过测试效果展示了组件间数据共享和状态更新的流程。
Vue学习之--------深入理解Vuex之多组件共享数据(2022/9/4)
|
1天前
|
JavaScript
Vue学习之--------深入理解Vuex之模块化编码(2022/9/4)
这篇文章详细介绍了Vuex的模块化编码和命名空间的使用,旨在让代码更易于维护并提高数据分类的明确性。内容包括模块化和命名空间的概念、如何在store中配置模块、以及如何在组件中使用模块化的数据。文章通过实战项目案例,展示了如何拆分`store/index.js`文件,创建`count.js`和`person.js`模块,并在`Count.vue`和`Person.vue`组件中使用这些模块。最后,文章还提供了测试效果和一些使用注意点。
Vue学习之--------深入理解Vuex之模块化编码(2022/9/4)
|
1天前
|
JavaScript 前端开发 开发者
Vue学习之--------深入理解Vuex、原理详解、实战应用(2022/9/1)
这篇文章详细介绍了Vuex的基本概念、使用场景、安装配置、基本用法、实际应用案例以及注意事项,通过一个数字累加器的实战示例,帮助开发者深入理解Vuex的原理和应用。
|
1天前
|
存储 JavaScript API
vue后台管理权限码处理
【8月更文挑战第19天】vue后台管理权限码处理
8 0
|
1天前
|
JavaScript
Vue学习之--------深入理解Vuex之getters、mapState、mapGetters(2022/9/3)
这篇文章深入探讨了Vuex中的getters概念和用法,以及如何通过mapState、mapGetters、mapActions和mapMutations四个辅助函数简化组件中的Vuex状态访问和操作,通过实际项目案例展示了这些概念的应用和效果。
|
4天前
|
JavaScript
Vue中如何设置在执行删除等危险操作时给用户提示(二次确认后执行对应的操作)
这篇文章介绍了在Vue项目中如何实现执行删除等危险操作时的二次确认机制,使用Element UI的`el-popconfirm`组件来弹出确认框,确保用户在二次确认后才会执行删除操作。
Vue中如何设置在执行删除等危险操作时给用户提示(二次确认后执行对应的操作)
|
JavaScript
vue 踩坑 01 ->两种创建vue实例的区别
第一个例子 {{msg}} var app = new Vue({ el: '#app', data: { m...
943 0
|
4天前
|
JavaScript
如何创建一个Vue项目(手把手教你)
这篇文章是一篇手把手教读者如何创建Vue项目的教程,包括使用管理员身份打开命令行窗口、找到存放项目的位置、通过vue-cli初始化项目、填写项目信息、进入项目目录、启动项目等步骤,并提供了一些常见第三方库的引入方法。
如何创建一个Vue项目(手把手教你)
|
4天前
|
前端开发
StringBoot+Vue实现游客或用户未登录系统前、可以浏览商品等信息、但是不能购买商品或者加入购物车等操作。登录系统显示用户的登录名(源码+讲解)
这篇文章介绍了使用StringBoot+Vue实现用户登录状态判断的方法,包括前端加载用户信息和后端设置session的源码示例。
|
1天前
|
JavaScript
Vue学习之--------路由的query、params参数、路由命名(3)(2022/9/5)
这篇文章详细介绍了Vue路由中的query参数、命名路由、params参数以及props配置的使用方式,并通过实际项目案例展示了它们在开发中的应用和测试结果,同时解释了`<router-link>`的`replace`属性如何影响浏览器历史记录。
Vue学习之--------路由的query、params参数、路由命名(3)(2022/9/5)