Vue造轮子-tab组件(下)

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
    }

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

原文地址:https://www.cnblogs.com/ories/p/12237890.html

时间: 2024-10-08 13:01:23

Vue造轮子-tab组件(下)的相关文章

造轮子-tab组件(中)

1. 如果给一个标签一个class,标签本身又有class,vue是默认会合并的.只有两个属性是这样一个是class,一个是style.这样就比较好改样式. <g-tabs-head class="red"></g-tabs> 2. 组件的结构以及selected的传递过程,见下图. 没有点击的图 发生了点击操作的图,两个item兄弟之间是没有关系的,发生了点击操作之后要做下图中的五件事情. 亮自己 熄兄弟 亮pane 熄pane 触发事件 update:sel

造轮子-tab组件(上)

1. 如何解决之前遗留的bug 根据错误提示大概确定原因,toast.test.js .style 造成. 用二分法找bug到底是哪一个用例出错. log+分析代码,mounted和$nextTick是有时间间隙的,得到原因测试用例中mount完了之后立刻click,click之后再$nextTick设置高度,所以可能是click太快了,此时s当$nextTick的时候,已经toast已经被我们关掉了,所以无法设置高度,那么解决方案就是我们就需要模拟用户点击,200ms后再点击 // toast

Vue造轮子-手风琴组件

一. 大致的使用方法 <div id="app" style="padding-left: 100px"> <g-collpase> <g-collapse-item title="标题1">内容1</g-collapse-item> <g-collapse-item title="标题2">内容2</g-collapse-item> <g-coll

Vue 造轮子

这是一门面向「初级和中级前端开发者」的 Vue 系统课. 这门课我酝酿了很久,这周终于开始直播了,目前已有 30 多个小伙伴报名. 想系统掌握 Vue 的同学可以继续往下看.  百度云盘 课程内容 UI 设计稿(未完工,更新中) 学习用 Vue 造轮子(有我自己制作的 UI 稿,标注齐全,需求明确) 通过造轮子完全掌握 Vue 的用法 了解 Vue 的周边工具,如单元测试工具.Vuex.Vue Router 等 目前共有 28 节课,涵盖表单控件.日期选择器.表格组件.Tree 组件.Sugge

Vue可自定义tab组件

在工作中我们常常要用到tab组件,如果有用第三方组件库的话一般都会有这个组件,但如果没有使用第三方组件库,或者想要自定义tab,那么或许这个无依赖的tab组件将会极大地节约你的开发时间. 如何使用? 1. 首先先安装: npm i vue-cus-tabs -S 2. 在new vue之前引入样式并use一下VueCusTab: import 'vue-cus-tabs/style/index.css' import { installCusTabs } from 'vue-cus-tabs';

造轮子-toast组件的实现(下)

1.解决 toast 中传入 html 的问题,通过假的 slot 来实现 // plugins.js toast.$slots.default = [message] // toast.vue <div v-html="$slots.default[0]"></div> // 使用 created() { this.$toast('<p>我是<strong>hi</strong></p>',{}) }, 2.在

vue + element-ui 制作tab切换(切换vue组件,踩坑总结)

本篇文章使用vue结合element-ui开发tab切换vue的不同组件,每一个tab切换的都是一个新的组件. 1.vue如何使用element-ui 上一篇文章已经分享了如何在vue中使用element-ui创建tab组件切换内容(需要了解的朋友点击链接查看) 2.创建相应文件. a.创建父组件 src/components/tabZujian.vue b.创建自组件(被切换的组件)src/tabComponents 文件夹 + + tabComponents(目录) ---- tabZuji

GitHub Android 最火开源项目Top20 GitHub 上的开源项目不胜枚举,越来越多的开源项目正在迁移到GitHub平台上。基于不要重复造轮子的原则,了解当下比较流行的Android与iOS开源项目很是必要。利用这些项目,有时能够让你达到事半功倍的效果。

1. ActionBarSherlock(推荐) ActionBarSherlock应该算得上是GitHub上最火的Android开源项目了,它是一个独立的库,通过一个API和主题,开发者就可以很方便地使用所有版本的Android动作栏的设计模式. 对于Android 4.0及更高版本,ActionBarSherlock可以自动使用本地ActionBar实现,而对于之前没有ActionBar功能的版本,基于Ice Cream Sandwich的自定义动作栏实现将自动围绕布局.能够让开发者轻松开发

Hybrid App Development: 二、关于造轮子以及在Xcode iOS应用开发中加入Cordova

转载请注明出处:http://www.cnblogs.com/xdxer/p/4111552.html [ctrl+左键点击图片可以查看原图] 在上一篇关于Hybrid App Development的文章中,我讨论了一下在iOS下UIWebView的使用方法.但是光使用一个UIWebView所提供的功能还是完全不能满足我们的需求.   关于造轮子的思考: 在UIKit中的UIWebView虽然已经提供了很多功能了,比如JavaScript和Objc之间的通信.但是考虑到一个问题,如果在Hybr