Vue组件实战Demo

《Vue组件实战Demo》

前段时间太过于注重教程和api,几乎没怎么写代码,一上手果然问题乖乖暴露,以本篇博客作为总结。主要内容基本上都在代码注释里。以下如有误漏,敬请指正。

提要:由于本人排版能力极差,且图方便使用了第三方CSS库,故每个组件是乱堆的状态。

Tabs组件:

《Vue组件实战Demo》

注意事项:

    • props不能随意修改,只能由组件实例传入值进行访问,需要修改时则保存在一个变量中再操作
    • 在父组件中可以通过$children返回一个数组(引用?)进行访问
    • 列表渲染时应当指定key属性
    • v-for指令的一些思考:
      • 组件上应该添加一个key特性,参考这里这里
      • ES操作DOM遍历列表对其事件监听会因为作用域的问题每次只会监听到最后一个列表项
      • 但v-for不需处理,每个列表项都会单独监听(?)

直接使用组件即可

v-model双向绑定组件:

《Vue组件实战Demo》

原作者添加了内容过滤,本人也照搬。

不易于理解的地方在于表单的v-model和组件的v-model有所不同,点这里了解

因此需要手动处理

点这里看效果

附上两篇很常用的ES6新语法:

https://segmentfault.com/a/1190000009276670

https://segmentfault.com/a/1190000009649978

本文参考:

《Vue组件实战Demo》

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注