文档章节

Vue造轮子-tab组件(中)

ories
 ories
发布于 01/27 23:22
字数 934
阅读 104
收藏 0

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

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

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

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

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

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

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

provide.png

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的事件要注意点

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

个人微信,欢迎交流!

IMG_0146.jpg

本文由博客一文多发平台 OpenWrite 发布!

© 著作权归作者所有

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

评论(0)

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

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

铁皮饭盒
2019/07/17
0
0
SanicCRUD-vue 0.1发布, Python 全栈开发实践

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

boylegu
2017/06/19
1.2K
2
kpc v0.7.8 发布,同时支持 Vue/React/Intact 的前端组件库

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

JaveyZ
2018/12/14
857
0
组件库开发框架 - kpc

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

JaveyZ
2018/12/14
3.1K
6
SpringBoot-vue 0.1发布, 一种高效Java全栈开发实践

背景 如今Web开发领域,当有人提到Java时,总会让人觉得臃肿、古老而过时且开发效率没有某些动态语言高效,甚至在此之前还有人高喊“Java 已死”;,但是事实真是如此吗?其实如果你一直关注着...

boylegu
2017/07/11
45
0

没有更多内容

加载失败,请刷新页面

加载更多

网站被挂马该怎么彻底的解决 2020年技术篇分享

在网站运营以及优化这方面总是会有一些无所事事的人,冒着风险做各种各样的违规行为的工作,有的时候忽然发现自己的公司网站,就被他人直接挂了木马,那些超链接鼠标点击进来,全部都是灰色内...

网站安全
33分钟前
46
0
php环境搭建+Hello World

1 概述 基础教程,搭建php入门基本环境.环境win10. 2 安装php 2.1 下载 官网点击这里 2.2 安装 其实只需要添加环境变量即可.win+Pause,高级系统设置: Path这里新建一个,刚才的php目录. 2.3 测...

氷泠
36分钟前
40
0
Minecraft Fabric 教程 #9 添加盔甲

首发于Enaium的个人博客 创建一个盔甲类 public class EndArmorMaterials implements ArmorMaterial { [...]} 复制一下内容 private static final int[] BASE_DURABILITY = {13, ......

Enaium
40分钟前
72
0
PHPUnit简介及使用

一、PHPUnit是什么? 1、它是一款轻量级的PHP测试框架,地址:http://www.phpunit.cn 2、手册:http://www.phpunit.cn/ 二、为什么要用PHPUnit? 1、可以通过命令操控测试脚本 2、可以测试性...

dragon_tech
46分钟前
76
0
在微服务架构中监听以太坊合约事件【Eventeum】

当构建大规模DApp时,监视以太坊的事件会变得很痛苦。在这篇文章中,我们将介绍如何使用Eventeum将后端微服务与以太坊智能合约事件之间桥接起来。 以太坊教程链接:Dapp入门 | 电商Dapp实战 ...

区块链教程
55分钟前
80
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部