详解Vue组件实现tips的总结


Posted in Javascript onNovember 01, 2017

官网上已经有的内容,我就不再赘述了,直接在官网上查看即可,这里蚊子想换个角度来讲解下vue的组件。

组件,顾名思义,就是把一个相对独立,而且会多次使用的功能抽象出来,成为一个组件!如果我们要把某个功能抽象为一个组件时,要做到这个组件对其他人来说是个黑盒子,他们不用关心里面是怎么实现的,只需要根据约定的接口调用即可!

我用一张图稍微总结了下Vue中组件的构成:

详解Vue组件实现tips的总结

可以看到组件中包含的东西还是蛮多的,而且,还有很多的点没有列出来,这里面的每一个知识点能都展开讲很多。不过我们这里不讲原理,只讲使用。

我们以一个tips弹窗为例,来综合运用下组件的知识点。tips弹窗,几乎所有的框架或者类库,都会有弹窗这个组件,因为弹窗这个功能平时非常普遍,而且模块解耦度高!

1. 接口约定

我们这里实现的弹窗,能用到的知识点有:props, event, slot, ref等。这里我们也能看到各个知识点是怎么运用的。

/**
 * modal 模态接口参数
 * @param {string} modal.title 模态框标题
 * @param {string} modal.text 模态框内容
 * @param {boolean} modal.showbtn 是否显示按钮
 * @param {string} modal.btnText 按钮文字
 */

 Vue.component('tips', {
  props : ['tipsOptions'],
  template : '#tips',

  data(){
    return{
      show : false
    }
  },

  computed:{
    tips : {
      get() {
        let tips = this.tipsOptions || {};
        tips = {
          title: tips.title || '提示',
          text: tips.text || '',
          showbtn : tips.showbtn || true,
          btnText : tips.btnText || '确定'
        };
        // console.log(tips);
        return tips;
      }
    }
  }
})

2. modal组件的实现

tips组件相对来说实现的比较简单,仅用作提示用户的简单弹层。

模板:

<div class="tips" v-show="show" transition="fade">
  <div class="tips-close" @click="closeTips">x</div>
  <div class="tips-header">
    <slot name="header">
      <p class="title">{{tips.title}}</p>
    </slot>
  </div>
  <div class="tips-body">
    <slot name="body">
      <p class="notice">{{tips.text}}</p>
    </slot>
  </div>
  <div class="tips-footer">
    <a href="javascript:;" rel="external nofollow" rel="external nofollow" v-if="tips.showbtn" @click="yes" >{{tips.btnText}}</a>
  </div>
</div>

模板中将结构分成了三部分,标题、内容和操作区域。这里既可以使用props传递字符串,也可以使用slot进行定制。

tips样式:

.tips {
  position: fixed;
  left: 10px;
  bottom: 10px;
  z-index: 1001;
  -webkit-overflow-scrolling: touch;
  max-width: 690px;
  width: 260px;
  padding: 10px;
  background: #fff;
  box-shadow: 0 0 10px #888;
  border-radius: 4px;
}
.tips-close{
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
}
.tips-header{
  text-align: center;
  font-size: 25px;
}

组件内的方法:

methods:{
  closeTips(){
    this.show = false;
  },

  yes : function(){
    this.show = false;
    this.$emit('yes', {name:'wenzi', age:36}); // 触发yes事件
  },

  showTips(){
    var self = this;
    self.show = true;

    setTimeout(function(){
      // self.show = false;
    }, 2000)
  }
}

3. 调用tips组件

首先我们开始渲染组件:

<div class="app">
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" @click="showtips">显示</a>
  <tips :tips-options="tipsOptions" ref="dialog" @yes="yes" v-cloak >
    <h3 slot="header">提示标题</h3>
    <div slot="body">
      <p>hello world</p>
      <p>wenzi</p>
    </div>
  </tips>
</div>

点击显示按钮后展示tips:

var app = new Vue({
  el : '.app',

  data : {
    tipsOptions : {
      title : 'tip'
    }
  }

  methods:{
    // 监听从组件内传递出来的事件
    yes(args){
      // console.log( args );
      alert( JSON.stringify(args) );
    },

    // 显示tips
    showtips(){
      // console.log( this.$refs );
      this.$refs.dialog.showTips();
    }
  }
})

4. 总结

在这个简单的tips组件里,我们实现了用props传递参数,用$emit向外传递参数,用slot插槽来定制内容。

需要注意的是:组件props是单向绑定,即父组件的属性发生变化时,子组件能接收到相应的数据变化,但是反过来就会出错。即不能在子组件中修改props传过来的数据,来达到修改父组件属性的目的。这是为了防止子组件无意修改了父组件的状态。

另外,每次父组件更新时,子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop。如果你这么做了,Vue 会在控制台给出警告。如果真的需要在子组件里进行修改,可以用这两种方法应对:

定义一个局部变量,并用 prop 的值初始化它:

props: ['initialCounter'],
data: function () {
 return { counter: this.initialCounter }
}

定义一个计算属性,处理 prop 的值并返回。

props: ['size'],
computed: {
 normalizedSize: function () {
  return this.size.trim().toLowerCase()
 }
}

当然,这只是单页面中组件的实现,更复杂的组件后续我们也会实现。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用HTML+CSS+JS制作简单的网页菜单界面
Jul 27 Javascript
JS实现黑色风格的网页TAB选项卡效果代码
Oct 09 Javascript
Hallo.js基于jQuery UI所见即所得的Web编辑器
Jan 26 Javascript
基于JS实现无缝滚动思路及代码分享
Jun 07 Javascript
Node错误处理笔记之挖坑系列教程
Jun 05 Javascript
基于Vue+element-ui 的Table二次封装的实现
Jul 20 Javascript
Vue中使用方法、计算属性或观察者的方法实例详解
Oct 31 Javascript
Element-UI中Upload上传文件前端缓存处理示例
Feb 21 Javascript
Vue中Table组件Select的勾选和取消勾选事件详解
Mar 19 Javascript
关于Layui Table隐藏列问题
Sep 16 Javascript
three.js欧拉角和四元数的使用方法
Jul 26 Javascript
vue+iview分页组件的封装
Nov 17 Vue.js
原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面
Nov 01 #Javascript
Angular 4根据组件名称动态创建出组件的方法教程
Nov 01 #Javascript
js前端导出Excel的方法
Nov 01 #Javascript
JS二分查找算法详解
Nov 01 #Javascript
ES7中利用Await减少回调嵌套的方法详解
Nov 01 #Javascript
JavaScript实现带有子菜单和控件的slider轮播图效果
Nov 01 #Javascript
bootstrap Table的一些小操作
Nov 01 #Javascript
You might like
php模拟socket一次连接,多次发送数据的实现代码
2011/07/26 PHP
基于curl数据采集之单页面采集函数get_html的使用
2013/04/28 PHP
大家在抢红包,程序员在研究红包算法
2015/08/31 PHP
JavaScript 动态改变图片大小
2009/06/11 Javascript
actionscript与javascript的区别
2011/05/25 Javascript
30个精美的jQuery幻灯片效果插件和教程
2011/08/23 Javascript
javascript中为某个元素指定事件的三种方式
2014/08/07 Javascript
jQuery弹出框代码封装DialogHelper
2015/01/30 Javascript
Jquery实现简单的轮播效果(代码管用)
2016/03/14 Javascript
基于Bootstrap重置输入框内容按钮插件
2016/05/12 Javascript
js阻止默认浏览器行为与冒泡行为的实现代码
2016/05/15 Javascript
懒加载实现的分页&amp;&amp;网站footer自适应
2016/12/21 Javascript
JavaScript基础之AJAX简单的小demo
2017/01/29 Javascript
原生js和css实现图片轮播效果
2017/02/07 Javascript
纯js仿淘宝京东商品放大镜功能
2017/03/02 Javascript
jquery实现表单获取短信验证码代码
2017/03/13 Javascript
vue-router 中router-view不能渲染的解决方法
2017/05/23 Javascript
JS组件系列之Gojs组件 前端图形化插件之利器
2017/11/29 Javascript
Vue DevTools调试工具的使用
2017/12/05 Javascript
JS/HTML5游戏常用算法之追踪算法实例详解
2018/12/12 Javascript
Nuxt v-bind绑定img src不显示的解决
2019/12/05 Javascript
[01:01:25]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第三局
2016/02/27 DOTA
[00:44]2016完美“圣”典 风云人物:Mikasa宣传片
2016/12/07 DOTA
Python中数字以及算数运算符的相关使用
2015/10/12 Python
Python 3.3实现计算两个日期间隔秒数/天数的方法示例
2019/01/07 Python
Python实现基于SVM的分类器的方法
2019/07/19 Python
python支付宝支付示例详解
2019/08/22 Python
python实现统计代码行数的小工具
2019/09/19 Python
Python代码生成视频的缩略图的实例讲解
2019/12/22 Python
用Python做一个久坐提醒小助手的示例代码
2020/02/10 Python
pandas创建DataFrame的7种方法小结
2020/06/14 Python
CSS的pointer-events属性详细介绍(作用和注意事项)
2014/04/23 HTML / CSS
项目负责人岗位职责
2015/02/15 职场文书
幼儿园卫生保健制度
2015/08/05 职场文书
关于开学的感想
2015/08/10 职场文书
Ajax 的初步实现(使用vscode+node.js+express框架)
2021/06/18 Javascript