Vue 组件实例属性的使用

前言

由于最近面试了2、三十我的，发现大部分都仍是只是停留在 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
• model

多个属性的双向绑定呢

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

本章相关文档连接：

• .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 能够传对象的啊！！

本章相关文档连接：

• $attrs
• $props
• v-bind

listeners

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

本章相关文档连接：

• $listeners
• v-on

经常使用的实例属性

其余咱们比较经常使用的就是 $refs、$parent、$children、$el。

不经常使用的实例属性

$slots、$scopedSlots。slots 能够判断父组件里道理传了哪些 slot 进来。其余的你们就去官网文档里看把。

先到这

到这里应该你们能了解到，除了 Vue 文档除了教程章节，API 章节也相当重要。我以为熟读 Vue 文档，Vue 深度就能达到必定程度。至少面试问 Vue 的话，若是连 API 都不熟，会比较扣分。若是须要更深刻了解就去看源码，看优秀的组件库的实现。。

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