VUE做一个公共的提示组件，显示两秒自动隐藏，显示的值父组件传递给子组件
需求：VUE做一个公共的提示组件，显示两秒自动隐藏，显示的值由父组件动态传给子组件。
效果图：
实现步骤：
1.创建一个子组件 Toptips.vue (它就是公共提示组件)， optips.vue代码如下：
<template><div id="toptips" class="toptips">{{isMsg}}</div>
</template><script>export default {data() {return {isMsg: ''}},props: ['msg'],methods: {is_show: function() {if (this.isMsg) {setTimeout(() => {this.$emit('setTipMsg')}, 2000);}}},mounted() {this.isMsg = this.msg;this.is_show();}}
</script><style scoped>.toptips {position: fixed;-webkit-transform: translateZ(0);transform: translateZ(0);top: 0;left: 0;right: 0;padding: 5px;font-size: 28rpx;text-align: center;color: #fff;z-index: 5000;word-wrap: break-word;word-break: break-all;background-color: #ffb403;}
</style>
2.父组件引用该子组件
<template><div id='demo'><Toptips v-if='toptopsMsg' @setTipMsg='setTipMsg' :msg='toptopsMsg' /></div>
</template><script>
import Toptips from "../common/Toptips";export default{data(){return{toptopsMsg:''}},components:{Toptips:Toptips},methods:{setTipMsg:function(e){//e能获取到子组件传递给父组件的值this.toptopsMsg=false;}},mounted(options){this.toptopsMsg ='1'setTimeout(()=>{this.toptopsMsg='2'},3000);}}
</script>相关文章：
Linux课堂随笔---第四天
用户账户简介 在Linux系统中有三大类用户，分别是root用户，系统用户和普通用户。 在Linux系统中，root用户UID为0，root用户的权限是最高的，普通用户无法执行的操作，root用户都能完成。所以也被称为超级用户。…
初级开发人员的缺点_作为一名初级开发人员，我如何努力克服自己的挣扎
初级开发人员的缺点by Syeda Aimen Batool通过Syeda Aimen Batool 作为一名初级开发人员，我如何努力克服自己的挣扎 (How I’m working to overcome my struggles as a junior developer) I believe the other name for coding is the “struggle”. And if you ar…
lintcode-136-分割回文串
136-分割回文串 给定一个字符串s，将s分割成一些子串，使每个子串都是回文串。 返回s所有可能的回文串分割方案。 样例 给出 s "aab"，返回 [ ["aa", "b"], ["a", "a", "b"] ] 标…
微信小程序把繁琐的判断用Js简单的解决
场景： 订单列表，有很多种订单状态，根据不同的订单状态要显示不同的css。 适用场景：需要根据数组下标判断不同的显示。 示例代码： this.data.order [{"_type":"1","custName":"…
数论(Lucas定理) HDOJ 4349 Xiao Ming's Hope
题目传送门 题意：求C (n,0),C (n,1),C (n,2)...C (n,n)中奇数的个数 分析：Lucas 定理：A、B是非负整数，p是质数。AB写成p进制：Aa[n]a[n-1]...a[0]，Bb[n]b[n-1]...b[0]。则组合数C(A,B)与C(a[n],b[n])*C(a[n-…
docker容器虚拟化技术_Docker，虚拟机和容器的全面介绍
docker容器虚拟化技术by shota jolbordi通过Shota Jolbordi Docker has been a buzzword for tech people for the last several years, and the more times goes by, the more often you hear about it. We’re seeing it more in job requirements, and more companies are …
IOS中的响应者链
响应者链就是当子视图不响应,父视图有响应事件,父视图响应 #import "RootViewController.h" #import "ResponderView.h" interface RootViewController ()endimplementation RootViewController- (void)viewDidLoad {[super viewDidLoad];// Do any additi…
MySQL闪退问题的解决
刚刚学习了数据库，并且安装了MySQL，正当高兴之余，发现我的MySQL出现了闪退的显现。上网搜了好久的解决方案。最后解决了这个问题，也舒心了。 问题从这里开始： 接着我打开MySQL，寻思能不能用，结果…
HTML封装AJAX请求，在请求里面写登录的逻辑 ajax 网络请求 post
调用方法： 先引用config.js，然后调用封装网络请求。 里面三个参数 1.url， 2.请求需要提交的数据, 3.请求类型 // 获取二维码、背景图片接口 getScheduleInfo() {var url /v1/basketball/getQRCode.do;var params {phone: 13977284414}co…
oye pandora_我尝试了Pandora出色的功能优先级排序方法。 这是我学到的。
oye pandoraby Josh Temple通过乔什坦普尔 我尝试了Pandora出色的功能优先级排序方法。 这是我学到的。 (I tried Pandora’s brilliant method for feature prioritization. Here’s what I learned.) 潘多拉(Pandora)的方法和3美元的便签纸如何使利益相关者的管理变得轻而易…
2016-2017-2软件工程课程总结
2016-2017-2软件工程课程总结 本学期的软件工程课程终于在大家的共同努力下圆满落幕了，我们的暑假也正式开启，终于有时间写写这门课的总结了。 在2016年下半学期末的时候课程组就决定使用邹欣老师的书《构建之法》，由课程组长王瑞老师带领入构…
asp.net mvc jqgrid 同一个页面查询不同的表，jqgrid显示不同表的表头和数据并且分页...
基于我上一篇文章<a href"http://www.cnblogs.com/alasai/p/4765756.html">asp.net mvc excel导入</a>中不同的部门上传不同的excel文件类型，当在同一个页面查询时怎么办呢。 解决方案：根据传过来的表名和时间参数一次性把数据全部…
降维后的高维特征的参数_高维超参数调整简介
降维后的高维特征的参数by Thalles Silva由Thalles Silva 高维超参数调整简介 (An introduction to high-dimensional hyper-parameter tuning) 优化ML模型的最佳做法 (Best practices for optimizing ML models) If you ever struggled with tuning Machine Learning (ML) mo…
细细品味大数据--初识hadoop
初识hadoop 前言 之前在学校的时候一直就想学习大数据方面的技术，包括hadoop和机器学习啊什么的，但是归根结底就是因为自己太懒了，导致没有坚持多长时间，加上一直为offer做准备，所以当时重心放在C上面了（虽…
js中Array数组中的常用方法汇总
Array的push与unshift方法性能比较分析从原理就可以知道，unshift的效率是较低的。原因是，它每添加一个元素，都要把现有元素往下移一个位置。unshift比push要慢差不多100倍！Array有一个叫做reverse的方法，能够把一个数组…
vue写一个通用的toast弹窗 toast 弹窗 提示
效果图 代码 <!DOCTYPE html> <html lang"en"><head><title>弹窗</title><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0, user-scalableno, minimum-s…
我对Node.js Core的首次贡献中学到了什么
by Yael Hermon通过Yael Hermon 我对Node.js Core的首次贡献中学到了什么 (What I Learned from My First Contribution To Node.js Core) A couple of weeks ago my very first PR for Node.js core was merged! A few days later, I decided to tweet about it and share ho…
SHA204A加密芯片配置
1、参考配置文章：http://blog.csdn.net/a5882230/article/details/522148452、可以选slot configuration 1作为密钥区，该区的配置应为：0x81 81，对应的data 0的数据就密钥数据。3、slot configuration的配置有7个参数，其…
[剑指offer] 二叉搜索树的后序遍历序列
二叉搜索树的后序遍历序列 P157 题目：输入一个数组，判断这个数组是不是一个二叉搜索树的后序遍历的结果。 solution：我们知道后序遍历序列的最后一个item是根节点，如果确实是二叉搜索树的后序遍历结果，那么在[0,N-2]中…
HbuilderX中的git的使用 git HbuilderXgit HbuilderX 使用git
【前戏】：得在HubilderX中找到 "工具"->"插件安装" -> "Git插件" 。 【提交代码】：（1）选中该项目的文件，右键，Git提交 （2）填写提交信息、查看…
Swift与Objective-C：与恐龙有关的趋势
by Colin Smith通过科林史密斯 Swift与Objective-C：与恐龙有关的趋势 (Swift vs. Objective-C: The trending up-and-comer vs. the dinosaur) Swift的简短历史 (A short history of Swift) I remember how pivotal it was when Swift was introduced at Apple’s …
我的JavaScript学习笔记
1. 那些老旧的实例可能会在 <script> 标签中使用 type"text/javascript"。现在已经不必这样做了。JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。 2. <head> 或 <body> 中的 JavaScript 您可以在 HTML 文档中放入不限数量的脚本。 …
获取枚举值上的Description特性说明
/// <summary> /// 获取枚举值上的Description特性说明 /// </summary> /// <typeparam name"T">枚举类型</typeparam> /// <param name"obj">枚举值</param> /// <returns></returns> public static str…
微信小程序实时获取用户经纬度
注意，使用这个功能之前手机得先打开位置信息。 现在app.json配置 {"pages": ["pages/map/map","pages/index/index","pages/register/register","pages/logs/logs"],"window": {"backgroundTex…
pwa js_如何在互联网信息亭中实现PWA和Barba.js
pwa jsby Nino Mihovilić由NinoMihovilić 如何在互联网信息亭中实现PWA和Barba.js (How to Implement a PWA and Barba.js into internet kiosks) The project we’ll describe here is an interactive internet kiosk that’s used as an extension for the LikeUs mobile …
Vant 组件库（VUE）的使用 Vant滚动选择器 选择器 传值
在 vue- cli 项目中安装 官方文档链接 npm ( 后面内容需要在控制台终端输入) # 通过 npm 安装 npm i vant -S 自动按需引入组件：babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式 # 安装插件 npm…
MySQL的安装过程
近期对MySQL做了一些研究。曾经主要接触的是SQL SERVER。所以，今天对该安装过程做了一些总结以及使用过程中的一些心得。并分享给大家。记得前面。分享过一篇关于数据库的几种连接方式。而本系列文章。将以对数据库的详细操作为主。 MySQL是…
一个球从100米高度自由落下，每次落地后反弹回原高度的一半； * 再落下，求在第几次之后反弹高度小于0.1米， * 并计算在这一次落地时共经过多少米？...
package com.db2;/*** 一个球从100米高度自由落下，每次落地后反弹回原高度的一半； * 再落下，求在第几次之后反弹高度小于0.1米，* 并计算在这一次落地时共经过多少米？* * author denny**/ public class Demo1 {static …
在遗传算法中出现等式约束_排序算法中的稳定性-等式的处理
在遗传算法中出现等式约束by Onel Harrison通过Onel Harrison 排序算法中的稳定性-等式的处理 (Stability in Sorting Algorithms — A Treatment of Equality) Algorithms are at the heart of computer science. Algorithms used for sorting are some of the most fundamen…
vconsole 调试 查看LOG VUE在手机上调试 手机查看h5的日志
简单介绍下vConsole： vConsole是一个由微信公众平台前端团队研发的web前端开发者面板，可用于展示console日志，方便开发、调试。 使用场景1，在vue-cli 构建的项目中使用： 通过npm安装和使用: npm install vconsole -…