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 相关文章推荐
传递参数的标准方法(jQuery.ajax)
Nov 19 Javascript
javascript 图片上一张下一张链接效果代码
Mar 12 Javascript
jquery mobile事件多次绑定示例代码
Sep 13 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(jquery)
Nov 16 Javascript
JavaScript从数组中删除指定值元素的方法
Mar 18 Javascript
jquery简单实现带渐显效果的选项卡菜单代码
Sep 01 Javascript
全国省市二级联动下拉菜单 js版
May 10 Javascript
JSONP和批量操作功能的实现方法
Aug 21 Javascript
如何重置vue打印变量的显示方式
Dec 06 Javascript
vue计算属性及使用详解
Apr 02 Javascript
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
Jan 22 Javascript
vue项目接口域名动态获取操作
Aug 13 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脚本的10个技巧(6)
2006/10/09 PHP
解决163/sohu/sina不能够收到PHP MAIL函数发出邮件的问题
2009/03/13 PHP
php验证手机号码(支持归属地查询及编码为UTF8)
2013/02/01 PHP
PHP静态调用非静态方法的应用分析
2013/05/02 PHP
基于php设计模式中工厂模式详细介绍
2013/05/15 PHP
php 下载保存文件保存到本地的两种实现方法
2013/08/12 PHP
php实现websocket实时消息推送
2018/03/30 PHP
php实现二叉树中和为某一值的路径方法
2018/10/14 PHP
用JavaScript隐藏控件的方法
2009/09/21 Javascript
html文档中的location对象属性理解及常见的用法
2014/08/13 Javascript
JS实现仿苹果底部任务栏菜单效果代码
2015/08/28 Javascript
论JavaScript模块化编程
2016/03/07 Javascript
探寻JavaScript中this指针指向
2016/04/23 Javascript
Vue.js开发环境搭建
2016/11/10 Javascript
jQuery设置和获取select、checkbox、radio的选中值方法
2017/01/01 Javascript
Vuex之理解Store的用法
2017/04/19 Javascript
Angular2 自定义validators的实现方法
2017/07/05 Javascript
JavaScript表单即时验证 验证不成功不能提交
2017/08/31 Javascript
vue组件初学_弹射小球(实例讲解)
2017/09/06 Javascript
vue-cli 默认路由再子路由选中下的选中状态问题及解决代码
2018/09/06 Javascript
React Hooks的深入理解与使用
2018/11/12 Javascript
基于jQuery实现挂号平台首页源码
2020/01/06 jQuery
小程序实现上下切换位置
2020/11/16 Javascript
[57:09]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第一场 1月26日
2021/03/11 DOTA
20行python代码实现人脸识别
2019/05/05 Python
django foreignkey外键使用的例子 相当于left join
2019/08/06 Python
Tensorflow限制CPU个数实例
2020/02/06 Python
如何在windows下安装Pycham2020软件(方法步骤详解)
2020/05/03 Python
python实现excel公式格式化的示例代码
2020/12/23 Python
Python利用socket模块开发简单的端口扫描工具的实现
2021/01/27 Python
html5调用app分享功能示例(WebViewJavascriptBridge)
2018/03/21 HTML / CSS
美国在线购物频道:Shop LC
2019/04/21 全球购物
学术诚信承诺书
2014/05/26 职场文书
Nginx已编译的nginx-添加新模块
2021/04/01 Servers
Python pygame实现中国象棋单机版源码
2021/06/20 Python
SQL Server 中的事务介绍
2022/05/20 SQL Server