vue抽出组件并传值实例

 更新时间:2020-08-01 06:25:25   作者:佚名   我要评论(0)

使用父组件向子组件传值的方式
1,抽出的组件以及写法

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

补充知识:vue如何抽取公共组件并全局注册
项目的抽象程

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

1,抽出的组件以及写法

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

补充知识: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抽出组件并传值实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:

  • Vue实现的父组件向子组件传值功能示例
  • vue基本使用--refs获取组件或元素的实例
  • vue 进阶之实现父子组件间的传值
  • 深入理解Vue 组件之间传值

相关文章

  • vue抽出组件并传值实例

    vue抽出组件并传值实例

    使用父组件向子组件传值的方式 1,抽出的组件以及写法 2,注册使用的父组件以及传值,父组件return images 补充知识:vue如何抽取公共组件并全局注册 项目的抽象程
    2020-08-01
  • three.js 制作动态二维码的示例代码

    three.js 制作动态二维码的示例代码

    今天郭先生说一下用canvas解析图片流,然后制作一个动态二维码的小案例,话不多说先上图,这是郭先生的微信二维码哦! 1. 解析图片流 canvas = document.createE
    2020-08-01
  • Java内存模型知识详解

    Java内存模型知识详解

    1. 概述   多任务和高并发是衡量一台计算机处理器的能力重要指标之一。一般衡量一个服务器性能的高低好坏,使用每秒事务处理数(Transactions Per Second,TPS)这
    2020-08-01
  • Java中Thread.join()的使用方法

    Java中Thread.join()的使用方法

    概要 本文分三个部分对Thread.join()进行分析: 1. join() 的示例和作用 2. join() 源码分析 3. 对网上其他分析 join() 的文章提出疑问 1. join() 的示例和作用 1.1
    2020-08-01
  • Python使用shutil模块实现文件拷贝

    Python使用shutil模块实现文件拷贝

    主要作用与拷贝文件用的。 1.shutil.copyfileobj(文件1,文件2):将文件1的数据覆盖copy给文件2。 import shutil f1 = open("1.txt",encoding="utf-8") f2 = o
    2020-08-01
  • vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作

    vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作

    在vue项目中组件间相互传值或者后台获取的数据需要供多个组件使用的情况很多的话,有必要考虑引入vuex来管理这些凌乱的状态,今天这边博文用来记录这一整个的过程,
    2020-08-01
  • Java 操作Properties配置文件详解

    Java 操作Properties配置文件详解

    java中的properties文件是一种配置文件,主要用于表达配置信息,文件类型为*.properties,格式为文本文件,文件的内容是格式是"键=值"的格式,在properties 文件
    2020-08-01
  • Python如何执行精确的浮点数运算

    Python如何执行精确的浮点数运算

    问题 你需要对浮点数执行精确的计算操作,并且不希望有任何小误差的出现。 解决方案 浮点数的一个普遍问题是它们并不能精确的表示十进制数。 并且,即使是最简单
    2020-08-01
  • Python高并发解决方案实现过程详解

    Python高并发解决方案实现过程详解

    一.cdn加速 简单说就是把静态资源放到别人服务器上 全称:Content Delivery Network或Content Ddistribute Network,即内容分发网络 基本思路: 尽可能避开互联
    2020-08-01
  • Python 如何测试文件是否存在

    Python 如何测试文件是否存在

    问题 你想测试一个文件或目录是否存在。 解决方案 使用 os.path 模块来测试一个文件或目录是否存在。比如: >>> import os >>> os.path.exists('/etc/passwd') Tr
    2020-08-01

最新评论