zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    这些例子很炫,感兴趣的童鞋可以了解一下
    Java经典习题24
    Java经典习题23
    Java经典练习题22
    Java经典习题21
    Java经典习题20
    Java经典练习题19
    Java经典练习题18
    Java经典习题17
    Java经典习题16
  • 原文地址:https://www.cnblogs.com/qixidi/p/10164039.html
Copyright © 2011-2022 走看看