Vue 组件实例属性的使用

<p><code></p> <h2 id="articleHeader0">前言</h2> <p>因为最近面试了二、三十个人,发现大部分都还是只是停留在 Vue 文档的<a href="https://cn.vuejs.org/v2/guide/" rel="nofollow noreferrer" target="_blank">教程</a>。有部分连教程这部分的文档也没看全。<br />所以稍微写一点,让新上手的 Vuer 多了解 Vue 文档的其他更需要关注的点。</p> <p><strong>因为 Vue 文档已经是个很成熟的文档,并且实现的 demo 简洁明了,我就不具体写实现代码了,文内只会贴需要关注的知识的文档地址</strong></p> <h3 id="articleHeader1">v-model</h3> <h4>自定义组件上使用 v-model</h4> <p>一般可能会问怎么在自己写的组件上实现 v-model。因为一些同学用多了组件库,用的心安理得,完全不去想为什么组件库可以用 <code>v-model</code> 做各种双向绑定。问到如何自己写的时候直接懵逼了,所以这个是一定要会的。如果能在回答一下子组件可以用 <code>model</code> 属性,让 <code>v-model</code> 不再需要对 <code>value</code> 这个 <code>props</code> 做双向绑定就更好了, 说明你文档看的仔细。</p> <p><strong>其实 v-model 就是 prop + $emit 的语法糖, 可以拆成 value 和 @input </strong></p> <blockquote><p>所以记住拉,如果是简单的子组件要同步数据到父组件,不要再傻傻的 prop + $emit, 在父组件里修改数据了。</p></blockquote> <p>本章相关文档链接:</p> <ul> <li><a href="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" rel="nofollow noreferrer" target="_blank">v-model</a></li> <li><a href="https://cn.vuejs.org/v2/api/#model" rel="nofollow noreferrer" target="_blank">model</a></li> </ul> <h4>多个属性的双向绑定呢</h4> <p>如果你会用 v-model,那么就要知道 v-model 只能绑定一个属性,如果父组件有多个需要和子组件的做双向绑定的属性怎么办?你可以会想到用对象或者数组。但是这可以会导致操作过于复杂。然而可以用 <code>.async</code> 修饰符完成。</p> <p>本章相关文档链接:</p> <ul> <li><a href="https://cn.vuejs.org/v2/guide/components-custom-events.html#sync-%E4%BF%AE%E9%A5%B0%E7%AC%A6" rel="nofollow noreferrer" target="_blank">.async修饰符</a></li> </ul> <h3 id="articleHeader2">实例属性</h3> <h4>attrs &amp;&amp; props</h4> <p>这是个不常用的属性,但是在高级用法里非常常见。比如我把组件库里的多个组件封装一层,成为一个大的业务组件。我用这个大组件的时候需要灵活控制里面组件库的 <code>prop</code>,将参数透传到组件库的组件里。示例如下:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="// my-search.vue <template> <el-input v-model='myValue'></el-input> <el-button>搜索</el-button> </template>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-comment">// my-search.vue</span> &lt;template&gt; <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">el-input</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">'myValue'</span>/&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">el-button</span>&gt;</span>搜索<span class="hljs-tag">&lt;/<span class="hljs-name">el-button</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span></span></code></pre> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="// page.vue <template> <my-search placeholder='请输入搜索'></my-search> </template>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code>// page.vue <span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">my-search</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">'请输入搜索'</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">my-search</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span></code></pre> <p>有的小伙伴回答在 <code>my-search</code> 里定义这个 <code>prop</code> ,然后传到 <code>el-input</code> 里。然而他有 <code>20</code> 多个 <code>prop</code>,这样太麻烦了。</p> <p>有聪明的小伙伴说传个对象进去,然而最后还是没解决怎么把这个对象绑定到 <code>el-input</code> 上。答案已经很接近了。</p> <div class="google-auto-placed ap_container" style="text-align: center; width: 100%; height: auto; clear: none;"><ins data-ad-format="auto" class="adsbygoogle adsbygoogle-noablate" data-ad-client="ca-pub-6330872677300335" data-adsbygoogle-status="done" style="display: block; margin: auto; background-color: transparent;"><ins id="aswift_4_expand" style="display: inline-table; border: none; height: 0px; margin: 0px; padding: 0px; position: relative; visibility: visible; width: 697px; background-color: transparent;"><ins id="aswift_4_anchor" style="display: block; border: none; height: 0px; margin: 0px; padding: 0px; position: relative; visibility: visible; width: 697px; background-color: transparent; overflow: hidden; opacity: 0;"><iframe width="697" height="175" frameborder="0" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&amp;&amp;s.handlers,h=H&amp;&amp;H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&amp;&amp;d&amp;&amp;(!d.body||!d.body.firstChild)){if(h.call){setTimeout(h,0)}else if(h.match){try{h=s.upd(h,i)}catch(e){}w.location.replace(h)}}" id="aswift_4" name="aswift_4" style="left:0;position:absolute;top:0;border:0px;width:697px;height:175px;"></iframe></ins></ins></ins></div> <p>其实 Vue 已经帮我们把这个对象弄好了,我们只要直接在 <code>el-input</code> 组件上写 <code>v-bind="$attrs"</code>。</p> <p><strong>别忘了 v-bind 可以传对象的啊!!</strong></p> <p>本章相关文档链接:</p> <ul> <li><a href="https://cn.vuejs.org/v2/api/#vm-attrs" rel="nofollow noreferrer" target="_blank">$attrs</a></li> <li><a href="https://cn.vuejs.org/v2/api/#vm-props" rel="nofollow noreferrer" target="_blank">$props</a></li> <li><a href="https://cn.vuejs.org/v2/api/#v-bind" rel="nofollow noreferrer" target="_blank">v-bind</a></li> </ul> <h4>listeners</h4> <p>上面搞定了 props 的透传,别忘了还有事件的透传。同理 Vue 已经帮我们弄好了。<code>v-bind="$listeners"</code>。</p> <p>本章相关文档链接:</p> <ul> <li><a href="https://cn.vuejs.org/v2/api/#vm-listeners" rel="nofollow noreferrer" target="_blank">$listeners</a></li> <li><a href="https://cn.vuejs.org/v2/api/#v-on" rel="nofollow noreferrer" target="_blank">v-on</a></li> </ul> <h4>常用的实例属性</h4> <p>其他我们比较常用的就是 <code>$refs</code>、<code>$parent</code>、<code>$children</code>、<code>$el</code>。</p> <h4>不常用的实例属性</h4> <p><code>$slots</code>、<code>$scopedSlots</code>。slots 可以判断父组件里道理传了哪些 slot 进来。其他的大家就去官网文档里看把。</p> <h2 id="articleHeader3">先到这</h2> <p>到这里应该大家能了解到,除了 Vue 文档除了教程章节,<a href="https://cn.vuejs.org/v2/api/" rel="nofollow noreferrer" target="_blank">API</a> 章节也至关重要。我觉得熟读 Vue 文档,Vue 深度就能达到一定程度。至少面试问 Vue 的话,如果连 API 都不熟,会比较扣分。如果需要更深入了解就去看源码,看优秀的组件库的实现。。</p> <p><strong>其实我有很多也是从组件库里学到的~ 建议有空多看看你经常使用的组件库源码,至少比 Vue 源码简单多了。。而且更贴合我们的使用场景</strong></p> <p></code></p>
脚本宝典为你提供优质服务
脚本宝典 » Vue 组件实例属性的使用

发表评论

提供最优质的资源集合

立即查看 了解详情