文档章节

Vue造轮子-tab组件(下)

ories
 ories
发布于 01/28 13:12
字数 821
阅读 63
收藏 0

1. 为什么一个 new Vue 可以构造出一个 eventBus

// 当我们定义了new Vue之后,可以这样用
var app = new Vue({
    created(){
        this.$emit()
        this.$on()
    }
})

// 也可以这样用
app.$emit()
app.$on()
app.$off()

// 那么归根结底,只要满足能触发一个事件,监听一个事件,和取消监听一个事件,那么它就是一个事件中心
eventBus
eventBus.$emit() // 触发一个事件
eventBus.$on() // 监听一个事件
eventBus.$off() // 取消监听一个事件

// 而我们的app 正好全部满足,而app就是 new Vue,new Vue就有这三个接口,所以new Vue就是一个eventHub。
// 因为它正好有这个三个接口,它的行为完全一样,这就叫基于行为的开发

2. 开始写 CSS 样式

<!-- tabs-head.vue -->
<style lang="scss" scoped>
  $tab-height: 40px;
  .tabs-head {
    display: flex;
    height: $tab-height;
    justify-content: flex-start;
    align-items: center;
    border: 1px solid red;
    > .actions-wrapper {
      margin-left: auto; // 这样写可以让按钮靠右,不要问为什么就是可以
    }
  }
</style>

<!-- tabs-item.vue -->
<style lang="scss" scoped>
  .tabs-item {
    flex-shrink: 0;
    padding: 0 2em; // 用em是因为只关心两个栏之间的间距
  }
</style>

3.激活属性 active 应该放在 data,还是放在 props

  • 如果需要用户传值,就放到 props 里面,因为 props 是你的输入参数,
  • data 不需要用户传值,自身维护值
    // 抽象的讲,就像写一个函数,prop是外部传递的参数,data相当于局部变量,组件就是一个函数
    function fn(prop1,prop2){
        var data1
        var data2
    }
    // 我们在设计api的时候,没有需要用户传递data,我们是让用户把name传进来,实际上是tabs传递来的
    // tabs传也是传,硬要用props也可以

4.在 mounted 里测试开送事件,不能用 created,因为需要确认元素已经挂载好了

  // app.js的new Vue
  data: {
    selectedTab: 'sports'
  }

  // index.html
  <g-tabs :selected.sync="selectedTab" @update:selected="yyy">
    <g-tabs-head>
      <g-tabs-item name="woman">
        <g-icon name="setting"></g-icon>美女
      </g-tabs-item>
    </g-tabs-head>
  </g-tabs>

  // tabs.vue发布
    mounted(){
      this.eventBus.$emit('update:selected', this.selected) // 这样写不可以触发外面
    }

  // tabs-item监听
    created(){
      this.eventBus.$on('update:selected',(name)=>{
        if(name === this.name){
          console.log(`我${this.name}被选中了`)
        }else{
          console.log(`我${this.name}没被选中了`)
        }
      })
    },

  // tabs-pane同理,选中了就把自己变成active

5. 加 class 写成计算属性

  // tabs-item.vue
    <div class="tabs-item" @click="xxx" :class="classes"></div>
    computed: {
      classes() { // classes是一个计算属性
        return {
          active: this.active
        }
      }
    },
    created() {
      this.eventBus.$on('update:selected', (name) => {
        this.active = name === this.name;
      })
    },

    // tabs-pane,同理,但是要多加一个v-if="active" 用于控制切换隐藏
    <div class="tabs-pane" :class="classes" v-if="active">
        <slot></slot>
    </div>

6. 组件不能改自己的 props

    // 相当于
    function fn(obj){
        obj.a = '1'
        return obj
    }
    // 没多大问题,但是我们一般不要改参数传来的东西,vue也一样,如果硬要改
    function fn(obj,n){
        obj.a = '1'
        n = 2
        var number = n
        number = 2
        return obj
    }

7. 框架主要的目的

    // 使得团队的傻逼也写不出垃圾代码以保证代码的平均质量
    function fn(obj){
        obj.a = '1' // bad
        return obj
    }
    function fn(obj,n){
        obj.a = '1'
        n = 2
        var number = n // good
        number = 2
        return obj
    }

最后:个人微信,欢迎交流!

<img src="https://i.loli.net/2020/01/27/gS4ZwP6zfAvULYT.jpg" alt="微信" width="400" height="400" align="bottom" /> > 本文由博客一文多发平台 [OpenWrite](https://openwrite.cn?from=article_bottom) 发布!

© 著作权归作者所有

ories
粉丝 0
博文 26
码字总数 17394
作品 0
青浦
高级程序员
私信 提问
加载中

评论(0)

css面试题: 手写collapse(折叠)的css/html部分

源码: github.com/any86/any-u… 做一个组件库不难 其实vue/react等框架的出现, 让自己做一个ui变得简单, 大部分的js逻辑都被库封装, 反而组件的代码主要都是css, 所以只要css写好了, 一个组...

铁皮饭盒
2019/07/17
0
0
Vue造轮子-tab组件(中)

如果给一个标签一个class,标签本身又有class,vue是默认会合并的。只有两个属性是这样一个是class,一个是style。这样就比较好改样式。 2. 组件的结构以及selected的传递过程,见下图。 没有点...

ories
01/27
30
0
SanicCRUD-vue 0.1发布, Python 全栈开发实践

本项目将使用Sanic + Vue2 + Webpack2 配合最简单CRUD的逻辑,从工程组织、编码、测试、前、后端构建、接口交互等来诠释一个基于Python的全新一代高性能全栈开发实践的Demo, 具备的功能(v0...

boylegu
2017/06/19
1.2K
2
组件库开发框架 - kpc

动机 目前市面上已经存在大量组件库,我们为什么还要造这个轮子呢?下面我们解释下这个组件库开发的动机。 随着公司业务和团队的壮大,我们很难统一全公司的技术栈,或者也没有必要统一全公司...

JaveyZ
2018/12/14
3.2K
6
[webAPP]记录几款比较好用的vue 移动端的ui框架

有时在做项目时,不同场景的项目既要有网站,又要有手机端,为了快速开发,如果功能简单,要求不高的话,我们一般会用H5进行移动端的适配。 如果采用纯html进行书写手机端的样式,往往UI的体...

刘玉刚
2019/04/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

如何仅克隆Git存储库的子目录? - How do I clone a subdirectory only of a Git repository?

问题: I have my Git repository which, at the root, has two sub directories: 我有我的Git存储库,它的根目录有两个子目录: /finisht/static When this was in SVN , /finisht was ch......

技术盛宴
40分钟前
45
0
【 开发指南 】智能家居技能

本文作者:DuerOs 目录 一、教学视频 二、整体架构 三、开发步骤&资料整理 四、常见问题解答 五、智能家居文档 树状提纲 ————————————————————————————————...

百度开发者中心
2019/03/29
105
0
008. 并发容器类 Map

1. JDK 源码学习方法 1. 演绎推导法 示例:因果推理。 因为 JAVA 中只提供了 BIO 和 NIO 两种方式,所以一切框架中,涉及到网络处理的,都可以用这两个知识点去探究原理。 2. 归纳总结法 示例...

紫穹
今天
120
0
如何使用sed替换换行符(\\ n)? - How can I replace a newline (\n) using sed?

问题: How can I replace a newline (" \\n ") with a space (" 如何将换行符(“ \\n ”)替换为空格(“ ") using the sed command? “)使用sed命令? I unsuccessfully tried: 我尝试失......

javail
今天
147
0
OSChina 周一乱弹 —— 原来这叫分别焦虑

Osc乱弹歌单(2020)请戳(这里) 【今日歌曲】 @薛定谔的兄弟 :分享洛神有语创建的歌单「我喜欢的音乐」: 《A Careful Tearing》- Levi Patel 手机党少年们想听歌,请使劲儿戳(这里) 清明...

小小编辑
今天
236
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部