使用父元件向子元件傳值的方式

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抽出元件並傳值例項就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。