vue抽出组件并传值实例

作者: 你太耀眼0
来源: 51数据库
2021-08-08

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

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中全局挂载