vue抽出组件并传值实例
程序员文章站
2022-04-01 18:48:59
使用父组件向子组件传值的方式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抽出组件并传值实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。