前言

因为最近面试了二、三十个人,发现大部分都还是只是停留在 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

Vue 组件实例属性的使用的更多相关文章

  1. Vue组件实例间的直接访问

    前面的话 有时候需要父组件访问子组件,子组件访问父组件,或者是子组件访问根组件. 在组件实例中,Vue提供了相应的属性,包括$parent.$children.$refs和$root,这些属性都挂载在 ...

  2. vue组件之属性Props

    组件的属性和事件 父子组件之间的通信 父子组件之间的通信就是 props down,events up,父组件通过 属性props向下传递数据给子组件,子组件通过 事件events 给父组件发送消息. ...

  3. 简述Vue的实例属性、实例方法

    1.实例属性 组件树访问 $parent -----> 用来访问当前组件实例的父实例: $root -----> 用来访问当前组件树的根实例,如果当前组件没有父实例,则$root表示当前组 ...

  4. Vue_(组件)实例属性

    Vue实例属性与方法中文文档 传送门   Vue实例属性:vue实例直接调用的属性 Learn 一.vm.$data:获取属性 二.vm.$el:获取实例挂载的元素 三.vm.$options:获取自 ...

  5. vue组件实例的生命周期

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. vue组件is属性详解

    查看官网对is属性的讲解,请移步:vue.js 本文参考资料 在vue.js组件教程的一开始提及到了is特性 下面是官网对is属性使用的说明: 组件功能是vue项目的一大特色.组件可以扩展html元素 ...

  7. 为什么vue组件的属性,有的需要加冒号“:”,有的不用?

    https://segmentfault.com/q/1010000010929963/a-1020000010930077 <tab :line-width="2" act ...

  8. 在被vue组件引用的 js 文件里获取组件实例this

    思路: 通过调用函数 把 组件实例this  传递 到 被应用的 js文件里 实例: 文件结构 在SendThis.vue 文件中引用 了modalConfig.js import modalConf ...

  9. vue实例属性(vm.$els)

    不需要表达式 参数: id(必需) 用法: 为 DOM 元素注册一个索引,方便通过所属实例的 $els 访问这个元素. 注意: 因为 HTML 不区分大小写,camelCase 名字比如 v-el:s ...

随机推荐

  1. 基于python的性能测试工具–locust

    现在有很多的性能测试工具,比如说我们熟悉的loadrunner.jmeter.ab.webbench等等,这些工具如果对一个没用过的朋友来说,学习起来比较不容易,但是如果你能看懂python代码,会写 ...

  2. Tyvj——P1864 [Poetize I]守卫者的挑战

    来源:http://www.tyvj.cn/p/1864 描述 打开了黑魔法师Vani的大门,队员们在迷宫般的路上漫无目的地搜寻着关押applepi的监狱的所在地.突然,眼前一道亮光闪过.“我,Niz ...

  3. git 撤回上一次commit中某一个不想添加的文件

    1. 假设我们修改了文件a,同时修改了IDE的配置文件b 2.此时我们只想添加文件a到commit中,却不小心将b也添加进去了 3.那么怎么撤回呢? 4.第一种方法 :重新提交commit 5. 第二 ...

  4. Java 对象的序列化、反序列化

    对象的序列化(Serialize):将内存中的Java对象转换为与平台无关的二进制流(字节序列),然后存储在磁盘文件中,或通过网络传输给另一个网络节点. 对象的反序列化(Deserialize):获取 ...

  5. ElasticSearch常用结构化搜索

    最近,需要用到ES的一些常用的结构化搜索命令,因此,看了一些官方的文档,学习了一下.结构化查询指的是查询那些具有内在结构的数据,比如日期.时间.数字都是结构化的. 它们都有精确的格式,我们可以对这些数 ...

  6. 从顺序随机I/O原理来讨论MYSQL MRR NLJ BNL BKA

    http://blog.itpub.net/7728585/viewspace-2129502/

  7. 简约至上.md

    中秋花了一天多时间阅读了简约至上这本书,书中内容不多,主要是向我们传达了产品设计的4个要素,给了产品经理设计产品时的一些要义指导; 一产品定位 在进行产品设计之前,首页需要对这款产品的商业定位需要有个 ...

  8. iOS -- SKPhysicsWorld类

    SKPhysicsWorld类 继承自 NSObject 符合 NSCodingNSObject(NSObject) 框架  /System/Library/Frameworks/SpriteKit. ...

  9. GOF 23种设计模式-单例模式

    • 创建型模式: – 单例模式.工厂模式.抽象工厂模式.建造者模式.原型模式. • 结构型模式: – 适配器模式.桥接模式.装饰模式.组合模式.外观模式.享元模式.代理模 式. • 行为型模式: – ...

  10. Win7下Nginx的安装与配置

    1.  下载nginx1.9.9版本:(版本随时间而变,下载最新即可) http://nginx.org/download/nginx-1.9.9.zip 2. 解压软件到对应位置,并重命名文件夹为n ...