vue抽出组件并传值实例


Posted in Javascript onJuly 31, 2020

使用父组件向子组件传值的方式

1,抽出的组件以及写法

vue抽出组件并传值实例

2,注册使用的父组件以及传值,父组件return images

vue抽出组件并传值实例

补充知识:vue如何抽取公共组件并全局注册

项目的抽象程度越高,代码修改起来就越方便,如何抽取一个公共的组件并且全局注册呢?

步骤

结构图

vue抽出组件并传值实例

公共组件代码

<template>
 <img class="wordLook" :src="imgWifi" width="17%" @click="wifiBrightClick()" />
</template>
<script>
export default {
 data() {
  return {
   imgWifi: require("../../../public/all/wifi0.png"),
   intervalIdWifi: "",
   time: 0// 播放时间
   //countWifi:0 // 替换图片索引
  };
 },
 methods: {
  wifiBrightClick() {
   var vm=this;
   clearInterval(this.intervalIdWifi); //清除计时器
   vm.intervalIdWifi = null; //设置为null
   if(vm.time==0){
    vm.time=1
   }
   var wifiTime=vm.time*300

   var countWifi=0;
   vm.intervalIdWifi = setInterval(() => {
    if (countWifi == 0) {
     vm.imgWifi = require("../../../public/all/wifi1.png");
    }
    if (countWifi == 1) {
     vm.imgWifi = require("../../../public/all/wifi2.png");
    }
    if (countWifi == 2) {
     vm.imgWifi = require("../../../public/all/wifi3.png");
    }
    if (countWifi == 3) {
     vm.imgWifi = require("../../../public/all/wifi0.png");
    }
    if (countWifi >= 4) {
     clearInterval(vm.intervalIdWifi); //清除计时器
     vm.intervalIdWifi = null; //设置为null
     //vm.countWifi = 0;
    }
    countWifi++;
   }, wifiTime);
  }
 }
};
</script>
<style scoped>
.wordLook  {
   display: block;
   margin-top: 18%;
 margin-left: 40%;
   margin-bottom: 1%;
   text-align: center;
   font-size: 50px;
   font-family: serif;
   font-weight: bolder;
   color: rgb(85,  83,  83);
   font-family: -webkit-pictograph;
}
</style>

在js文件中注册

import wifiBrightComponent from './wifiBright.vue'

const wifiBright ={
    install:function(Vue){
      Vue.component('wifiBright',wifiBrightComponent)
    }
  
}
export default wifiBright

在main.js中全局挂载

import wifiBright from './components/wifiBrightComponents'

Vue.use(wifiBright)

实际应用

<wifiBright class="wifiLook" ref="wifiBright" @click.native="soundClick()" v-show="showImg"></wifiBright>

成功!

以上这篇vue抽出组件并传值实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
slice函数的用法 之不错的应用
Dec 29 Javascript
jQuery使用手册之 事件处理
Mar 24 Javascript
IE6与IE7中,innerHTML获取param的区别
Mar 15 Javascript
有关于JS辅助函数inherit()的问题
Apr 07 Javascript
原生Javascript封装的一个AJAX函数分享
Oct 11 Javascript
javascript+canvas制作九宫格小程序
Dec 28 Javascript
JavaScript中检查对象property的存在性方法介绍
Dec 30 Javascript
原生js实现回复评论功能
Jan 18 Javascript
详解Vue 全局变量,局部变量
Apr 17 Javascript
vue proxy 的优势与使用场景实现
Jun 15 Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
Jun 19 Javascript
JS 4个超级实用的小技巧 提升开发效率
Oct 05 Javascript
Vue通过Blob对象实现导出Excel功能示例代码
Jul 31 #Javascript
Vue.js中使用Vuex实现组件数据共享案例
Jul 31 #Javascript
原生JS实现记忆翻牌游戏
Jul 31 #Javascript
js实现跳一跳小游戏
Jul 31 #Javascript
js实现翻牌小游戏
Jul 31 #Javascript
Vue 请求传公共参数的操作
Jul 31 #Javascript
vue2.0 解决抽取公用js的问题
Jul 31 #Javascript
You might like
php mssql 数据库分页SQL语句
2008/12/16 PHP
PHP通过header实现文本文件下载的代码
2010/08/08 PHP
phpmail类发送邮件函数代码
2012/02/20 PHP
PHP中设置时区,记录日志文件的实现代码
2013/01/07 PHP
关于file_get_contents返回为空或函数不可用的解决方案
2013/06/24 PHP
Laravel框架生命周期与原理分析
2018/06/12 PHP
Discuz不使用插件实现简单的打赏功能
2019/03/21 PHP
Laravel Eloquent ORM 实现查询表中指定的字段
2019/10/17 PHP
js原生appendChild的bug解决心得分享
2013/07/01 Javascript
JavaScript实现的圆形浮动标签云效果实例
2015/08/06 Javascript
AngularJS转换响应内容
2016/01/27 Javascript
noty ? jQuery通知插件全面解析
2016/05/18 Javascript
超实用的JavaScript代码段 附使用方法
2016/05/22 Javascript
AngularJS 与Bootstrap实现表格分页实例代码
2016/10/14 Javascript
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
2017/03/09 Javascript
使用 Node.js 对文本内容分词和关键词抽取
2017/05/27 Javascript
js实现带搜索功能的下拉框
2020/01/11 Javascript
Vue如何基于vue-i18n实现多国语言兼容
2020/07/17 Javascript
django 2.0更新的10条注意事项总结
2018/01/05 Python
Python爬虫爬取新浪微博内容示例【基于代理IP】
2018/08/03 Python
利用Django-environ如何区分不同环境
2018/08/26 Python
想学python 这5本书籍你必看!
2018/12/11 Python
python3实现zabbix告警推送钉钉的示例
2019/02/20 Python
基于python实现自动化办公学习笔记(CSV、word、Excel、PPT)
2019/08/06 Python
python实现人工智能Ai抠图功能
2019/09/05 Python
Python lxml库的简单介绍及基本使用讲解
2020/12/22 Python
大学生求职信范文应怎么写
2014/01/01 职场文书
单位刻章介绍信范文
2014/01/11 职场文书
小区门卫值班制度
2014/01/24 职场文书
八一演出活动方案
2014/02/03 职场文书
施工安全生产承诺书
2014/05/23 职场文书
2014年销售助理工作总结
2014/12/01 职场文书
校园广播站开场白
2015/06/01 职场文书
红色故事汇观后感
2015/06/18 职场文书
2015最新民情日记范文
2015/06/26 职场文书
公务员岗前培训心得体会
2016/01/08 职场文书