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 相关文章推荐
javascript数组组合成字符串的脚本
Jan 06 Javascript
js关于精确计算和数值格式化以及直接引js文件
Jan 28 Javascript
鼠标左键单击冲突的问题解决方法(防止冒泡)
May 14 Javascript
禁用页面部分JavaScript不是全部而是部分
Sep 03 Javascript
jQuery读取XML文件内容的方法
Mar 09 Javascript
Boostrap模态窗口的学习小结
Mar 28 Javascript
用angular实现多选按钮的全选与反选实例代码
May 23 Javascript
Vue.js学习记录之在元素与template中使用v-if指令实例
Jun 27 Javascript
vue 开发一个按钮组件的示例代码
Mar 27 Javascript
Vue动态路由缓存不相互影响的解决办法
Feb 19 Javascript
JavaScript实现猜数字游戏
May 20 Javascript
如何实现小程序与小程序之间的跳转
Nov 04 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
Windows下利用Gvim写PHP产生中文乱码问题解决方法
2011/04/20 PHP
php class中public,private,protected的区别以及实例分析
2013/06/18 PHP
php echo, print, print_r, sprintf, var_dump, var_expor的使用区别
2013/06/20 PHP
PHP调用JAVA的WebService简单实例
2014/03/11 PHP
php可扩展的验证类实例(可对邮件、手机号、URL等验证)
2015/07/09 PHP
php命令行(cli)模式下报require 加载路径错误的解决方法
2015/11/23 PHP
PHP实现获取第一个中文首字母并进行排序的方法
2017/05/09 PHP
PHP中PDO事务处理操作示例
2018/05/02 PHP
JavaScript 反科里化 this [译]
2012/09/20 Javascript
JQuery DataTable删除行后的页面更新利用Ajax解决
2013/05/17 Javascript
浅析Javascript使用include/require
2013/11/13 Javascript
jquery中交替点击事件toggle方法的使用示例
2013/12/08 Javascript
vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)
2017/10/16 Javascript
React注册倒计时功能的实现
2018/09/06 Javascript
vuex2中使用mapGetters/mapActions报错的解决方法
2018/10/20 Javascript
详解在Node.js中发起HTTP请求的5种方法
2019/01/10 Javascript
大转盘抽奖小程序版 转盘抽奖网页版
2020/04/16 Javascript
Vue $mount实战之实现消息弹窗组件
2019/04/22 Javascript
VUE脚手架具体使用方法
2019/05/20 Javascript
jQuery实现文本显示一段时间后隐藏的方法分析
2019/06/20 jQuery
vue动态路由:路由参数改变,视图不更新问题的解决
2019/11/05 Javascript
js实现图片粘贴到网页
2019/12/06 Javascript
WebStorm中如何将自己的代码上传到github示例详解
2020/10/28 Javascript
Python中的闭包实例详解
2014/08/29 Python
使用python实现knn算法
2017/12/20 Python
python编写微信远程控制电脑的程序
2018/01/05 Python
Python图像处理之识别图像中的文字(实例讲解)
2018/05/10 Python
解决python彩色螺旋线绘制引发的问题
2019/11/23 Python
Python 如何测试文件是否存在
2020/07/31 Python
python通过cython加密代码
2020/12/11 Python
python 对xml解析的示例
2021/02/27 Python
英国最大的百货公司:Harrods
2016/08/18 全球购物
中国专业的音频分享平台:喜马拉雅
2019/05/24 全球购物
酒店人事主管岗位职责
2015/04/11 职场文书
2015年校本培训工作总结
2015/07/24 职场文书
2015年乡镇组织委员工作总结
2015/10/23 职场文书