当前位置： 移动技术网 > IT编程>脚本编程>vue.js > vue抽出组件并传值实例

vue抽出组件并传值实例

2020年08月01日  | 移动技术网IT编程  | 我要评论

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

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抽出组件并传值实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网