Vue 组件实例属性的使用

淩亂°似流年 2022-04-03 15:22 269阅读 0赞

## 前言 ##

因为最近面试了二、三十个人，发现大部分都还是只是停留在 Vue 文档的[教程][Link 1]。有部分连教程这部分的文档也没看全。  
所以稍微写一点，让新上手的 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修饰符][.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][attrs]
 *  [$props][props]
 *  [v-bind][]

#### listeners ####

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

本章相关文档链接：

*  [$listeners][listeners]
 *  [v-on][]

#### 常用的实例属性 ####

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

#### 不常用的实例属性 ####

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

## 先到这 ##

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

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

来源：[https://segmentfault.com/a/1190000017483791][https_segmentfault.com_a_1190000017483791]

[Link 1]: https://cn.vuejs.org/v2/guide/
[v-model]: https://cn.vuejs.org/v2/guide/components-custom-events.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6%E7%9A%84-v-model
[model]: https://cn.vuejs.org/v2/api/#model
[.async]: https://cn.vuejs.org/v2/guide/components-custom-events.html#sync-%E4%BF%AE%E9%A5%B0%E7%AC%A6
[attrs]: https://cn.vuejs.org/v2/api/#vm-attrs
[props]: https://cn.vuejs.org/v2/api/#vm-props
[v-bind]: https://cn.vuejs.org/v2/api/#v-bind
[listeners]: https://cn.vuejs.org/v2/api/#vm-listeners
[v-on]: https://cn.vuejs.org/v2/api/#v-on
[API]: https://cn.vuejs.org/v2/api/
[https_segmentfault.com_a_1190000017483791]: https://segmentfault.com/a/1190000017483791