造轮子-tab组件(中)

1. 如果给一个标签一个class,标签本身又有class,vue是默认会合并的。只有两个属性是这样一个是class,一个是style。这样就比较好改样式。

    <g-tabs-head class="red"></g-tabs>

2. 组件的结构以及selected的传递过程,见下图。

  • 没有点击的图
  • 发生了点击操作的图,两个item兄弟之间是没有关系的,发生了点击操作之后要做下图中的五件事情。
    1. 亮自己
    2. 熄兄弟
    3. 亮pane
    4. 熄pane
    5. 触发事件 update:selected -> item2

3. 接下去考虑代码的实现,有两种方案

  1. 第一种爷爷爸爸儿子之前互相通信
  2. 用事件中心EventHub或者叫EventBus发布订阅模式实现,这种简单

    4. 下划线开头的属性不要用是私有属性给vue用的,$开头的属性是专门可以用的

    5. 在爷爷tabs组件上面加了privide后代都可以用,其他的属性只提供给儿子不提供给孙子,只有provide是任何后代都可以访问的。

    // tabs.vue这样就有了eventBus
   data(){
      return {
        eventBus: new Vue()
      }
    },
    provide(){
      return {
        eventBus:this.eventBus
      }
    },
    created(){
      console.log('爷爷的eventBus')
      console.log(this.eventBus)
      // this.$emit('update:selected','xxx')
    }

    // tabs-head.vie儿子就有了eventBus,其他组件同理
    inject: ['eventBus'],
    created(){
      console.log('爷爷给爸爸的eventBus')
      console.log(this.eventBus)
    }
下图橙色字的地方就是provide

6.取函数名字的时候先取一个必须要改的名字,之后再改

    created(){
      this.eventBus.$on('update:selected',(name)=>{
        console.log(name)
      })
      // 这句话的意思是监听selected被更新了,并且执行一个回调,这里监听的可能是其它的组件
    },
    methods: {
      xxx(){
        this.eventBus.$emit('update:selected',this.name)
        // 这句话的意思是大声喊出来selected更新了
      }
    }

7.index.html中,在g-tabs中监听update:selected事件,不会触发yyy,vue的事件是不会冒泡的,在哪里触发就在哪里,但是这个问题不是冒泡问题

  // 我们的eventBus是g-tabs生成的new Vue(),而app.js监听的g-tabs,是一个vue组件,
  // 也就是vue组件的事件,而不是new Vue()
  <g-tabs :selected.sync="selectedTab" @update:selected="yyy"></g-tabs>
    methods: {
        yyy(data){
            console.log('yyy')
            console.log(data)
        }
    }

    // 那么组件怎么触发呢
    // tabs.vue
    created(){
        this.$emit('update:selected', '这是 this $emit 出来的数据') // 这样写可以触发外面,这里的this
        就是当前组件
        this.eventBus.$emit('update:selected', '这是 this event $emit 出来的数据') // 这样写不可以触发外面
    }
    // app.js
    <g-tabs :selected.sync="selectedTab" @update:selected="yyy"></g-tabs>
    methods: {
        yyy(data){
            console.log('yyy')
            console.log(data)
        }
    }
  • 总结:事件要看在哪个对象上触发的,你需要知道你触发的事件是在哪个对象上触发的,一个是在this上面,一个是在this的eventBus上面,每个对象都可以触发不同事件。

8. 如果在tabs-header上不会触发

    // tabs-head
    created(){
      this.$emit('update:selected', '这是 tabs-head 抛出来的数据')
      // 这样写不可以触发外面是因为vue的事件系统是不会冒泡的,
      //如果g-tabs-head标签是一个div那么是可以触发到g-tabs的因为div是可以冒泡的
    }
    // index.html
     <g-tabs :selected.sync="selectedTab" @update:selected="yyy">
        <g-tabs-head class="red">
            <template slot="actions">
                <button>设置</button>
            </template>
        </g-tabs-head>
    </g-tabs>

9.关于Vue的事件要注意点

  • 事件是在哪个对象上调用的,在哪个对象上调用就只能在那个对象上监听
  • 事件不会冒泡,子标签触发的事件不会自动传到父标签

个人微信,欢迎交流!

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

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

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

造轮子-tab组件(上)

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

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() // 触发一个事件 e

造轮子-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造轮子-手风琴组件

一. 大致的使用方法 <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

使用react context实现一个支持组件组合和嵌套的React Tab组件

纵观react的tab组件中,即使是github上star数多的tab组件,实现原理都非常冗余. 例如Github上star数超四百星的react-tab,其在render的时候都会动态计算哪个tab是被选中的,哪个该被隐藏: getChildren() { let index = 0; let count = 0; const children = this.props.children; const state = this.state; const tabIds = this.tabIds

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

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

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

程序员为什么热衷造轮子

搜索一下"造轮子"或者"程序员为什么喜欢造轮子",会看到很多相关的讨论,这是个老生常谈的话题,很多人谈过了,谈了很多年.不过还是有再谈的必要. "造轮子"的含义: 明知道你做的不可能比前辈做得更好,却仍然坚持要做. 就软件开发而言,"造轮子"是指,"业界已经有公认的软件或者库了,却还坚持要自己做". 在软件开发过程中,有时你想造轮子老板却极力反对,有时你不想造轮子老板却坚持要造一个出来,为什么会有这种两极状

造轮子和用轮子:快速入门JavaScript模块化

造轮子和用轮子:快速入门JavaScript模块化 时间 2016-03-16 21:59:39  SegmentFault 原文  https://segmentfault.com/a/1190000004619857 主题 JavaScript 前言 都说“不重复造轮子”,就像iPhone——它除了打电话还可以播放音乐——但是工程师不用从零开始做一个音乐播放功能,也许只要在iPhone的系统中整合一个ipod. 前端开发亦是如此,最理想化的开发状态就是,工程师只写核心业务代码,其他通用的功能