详解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 相关文章推荐
wordpress之js库集合研究介绍
Aug 17 Javascript
jQuery 删除/替换DOM元素的几种方式
May 20 Javascript
JavaScript中的对象与JSON
Jul 03 Javascript
详解JavaScript操作HTML DOM的基本方式
Oct 21 Javascript
js window对象属性和方法相关资料整理
Nov 11 Javascript
js 实现数值的千分位及保存小数方法(推荐)
Aug 01 Javascript
使用JavaScript获取Request中参数的值方法
Sep 27 Javascript
jQuery AJAX 方法success()后台传来的4种数据详解
Aug 08 jQuery
angular.js实现列表orderby排序的方法
Oct 02 Javascript
vue-quill-editor+plupload富文本编辑器实例详解
Oct 19 Javascript
关于layui导航栏不展示下拉列表的解决方法
Sep 25 Javascript
vue Element-ui表格实现树形结构表格
Jun 07 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
ThinkPHP 防止表单重复提交的方法
2011/08/08 PHP
php实现文件下载更能介绍
2012/11/23 PHP
浅析php-fpm静态和动态执行方式的比较
2016/11/09 PHP
微信公众号OAuth2.0网页授权问题浅析
2017/01/21 PHP
javascript基本语法分析说明
2008/06/15 Javascript
javascript 在网页中的运用(asp.net)
2009/11/23 Javascript
JavaScript高级程序设计 事件学习笔记
2011/09/10 Javascript
innerHTML,outerHTML,innerText,outerText的用法及区别解析
2013/12/16 Javascript
一个JavaScript获取元素当前高度的实例
2014/10/29 Javascript
2014年50个程序员最适用的免费JQuery插件
2014/12/15 Javascript
JS动态修改iframe高度和宽度的方法
2015/04/01 Javascript
详解AngularJS中自定义指令的使用
2015/06/17 Javascript
JavaScript比较两个数组的内容是否相同(推荐)
2017/05/02 Javascript
浅谈Node.js 子进程与应用场景
2018/01/24 Javascript
微信小程序版翻牌小游戏
2018/01/26 Javascript
基于Echarts图表在div动态切换时不显示的解决方式
2020/07/20 Javascript
wxPython 入门教程
2008/10/07 Python
零基础写python爬虫之使用urllib2组件抓取网页内容
2014/11/04 Python
Python3里的super()和__class__使用介绍
2015/04/23 Python
python使用in操作符时元组和数组的区别分析
2015/05/19 Python
python实现域名系统(DNS)正向查询的方法
2016/04/19 Python
批处理与python代码混合编程的方法
2016/05/19 Python
python基础_文件操作实现全文或单行替换的方法
2017/09/04 Python
python机器学习实战之树回归详解
2017/12/20 Python
python 读取txt中每行数据,并且保存到excel中的实例
2018/04/29 Python
对python列表里的字典元素去重方法详解
2019/01/21 Python
python生成器/yield协程/gevent写简单的图片下载器功能示例
2019/10/28 Python
推荐10个HTML5响应式框架
2016/02/25 HTML / CSS
英国婴儿产品专家:Samuel Johnston
2020/04/20 全球购物
经典c++面试题四
2015/05/14 面试题
电信营业员自我评价分享
2014/01/17 职场文书
2014离婚协议书范文两篇
2014/09/15 职场文书
2015秋季运动会通讯稿
2015/07/18 职场文书
学校教师培训工作总结
2015/10/14 职场文书
学校就业保障协议书
2019/06/24 职场文书
电频谱管理的原则是什么
2022/02/18 无线电