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 相关文章推荐
使用Json比用string返回数据更友好,也更面向对象一些
Sep 13 Javascript
js实现杯子倒水问题自动求解程序
Mar 25 Javascript
基于canvas实现的钟摆效果完整实例
Jan 26 Javascript
BootStrap.css 在手机端滑动时右侧出现空白的原因及解决办法
Jun 07 Javascript
jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)
Nov 18 Javascript
JS仿淘宝搜索框用户输入事件的实现
Jun 19 Javascript
微信小程序 rich-text的使用方法
Aug 04 Javascript
react-native中ListView组件点击跳转的方法示例
Sep 30 Javascript
Javascript中的作用域及块级作用域
Dec 08 Javascript
详解如何使用nvm管理Node.js多版本
May 06 Javascript
VUE兄弟组件传值操作实例分析
Oct 26 Javascript
详解JavaScript中Arguments对象用途
Aug 30 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 防恶意刷新实现代码
2010/05/16 PHP
调整PHP的性能
2013/10/30 PHP
关于PHP中字符串与多进制转换函数的实例代码
2016/11/03 PHP
PHP实现双链表删除与插入节点的方法示例
2017/11/11 PHP
基于jquery实现的省市区级联无ajax
2013/09/24 Javascript
AngularJs 60分钟入门基础教程
2016/04/03 Javascript
angularjs 中$apply,$digest,$watch详解
2016/10/13 Javascript
Angular2生命周期钩子函数的详细介绍
2017/07/10 Javascript
深入浅出了解Node.js Streams
2019/05/27 Javascript
nodejs读取图片返回给浏览器显示
2019/07/25 NodeJs
vue弹出框组件封装实例代码
2019/10/31 Javascript
JavaScript实现拖拽效果
2020/03/16 Javascript
Vue组件间数据传递的方式(3种)
2020/07/13 Javascript
[46:09]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第三场
2014/05/26 DOTA
[02:08]2014DOTA2国际邀请赛 430专访:力争取得小组前二
2014/07/11 DOTA
python简单实现计算过期时间的方法
2015/06/09 Python
巧用python和libnmapd,提取Nmap扫描结果
2016/08/23 Python
python实现自动发送报警监控邮件
2018/06/21 Python
python随机数分布random均匀分布实例
2019/11/27 Python
python获取网络图片方法及整理过程详解
2019/12/20 Python
python实现将json多行数据传入到mysql中使用
2019/12/31 Python
Python中私有属性的定义方式
2020/03/05 Python
python对接ihuyi实现短信验证码发送
2020/05/10 Python
简约控的天堂:The Undone
2016/12/21 全球购物
如果有两个类A,B,怎么样才能使A在发生一个事件的时候通知B
2016/03/12 面试题
体育老师的教学自我评价分享
2013/11/19 职场文书
高中微机老师自我鉴定
2014/02/16 职场文书
团队精神的演讲稿
2014/05/14 职场文书
关于旅游的活动方案
2014/08/15 职场文书
学生党员批评与自我批评
2014/10/15 职场文书
小学少先队辅导员述职报告
2015/01/10 职场文书
幼儿园个人总结
2015/02/28 职场文书
保卫工作个人总结
2015/03/03 职场文书
护士自我推荐信范文
2015/03/24 职场文书
车间质检员岗位职责
2015/04/08 职场文书
浅谈Python数学建模之线性规划
2021/06/23 Python