vue抽出組件并傳值實例

更新時間：2020年07月31日 14:50:03 作者：contour

這篇文章主要介紹了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抽出組件并傳值實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vue-cli腳手架初始化項目各個文件夾用途
這篇文章主要介紹了vue-cli腳手架初始化項目各個文件夾用途,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2023-01-01
vue中如何引入jQuery和Bootstrap
本篇文章主要介紹了vue中如何引入jQuery和Bootstrap，詳細的介紹了引入jQuery和Bootstrap的方法，有興趣的可以了解一下。
2017-04-04
使用Vue3和ApexCharts實現(xiàn)3D徑向條形圖的代碼
徑向條形圖是一種用于可視化單一數(shù)據(jù)點及其與目標或理想值的關系的圖表類型,它在顯示進度、完成率或其他類似度量時非常有用,本文給大家介紹了使用Vue3和ApexCharts實現(xiàn)3D徑向條形圖,感興趣的小伙伴可以參考閱讀下
2024-06-06
解決vue自定義全局消息框組件問題
這篇文章主要介紹了vue自定義全局消息框組件問題及解決方法，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-11-11
elementui的table列超出隱藏tooltip懸浮顯示問題
這篇文章主要介紹了elementui的table列超出隱藏tooltip懸浮顯示問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-11-11
elementUI樣式修改未生效問題詳解(掛載到了body標簽上)
vue+elementUI項目開發(fā)中,經(jīng)常遇到修改elementUI組件樣式無效的問題,這篇文章主要給大家介紹了關于elementUI樣式修改未生效問題的相關資料,掛載到了body標簽上,需要的朋友可以參考下
2023-04-04
基于vue-simplemde實現(xiàn)圖片拖拽、粘貼功能
這篇文章主要介紹了基于vue-simplemde實現(xiàn)圖片拖拽、粘貼功能,需要的朋友可以參考下
2018-04-04
在Vue3中進行單元測試和集成測試的操作方法
隨著越來越多的企業(yè)和開發(fā)者選擇使用 Vue.js 構建他們的前端應用程序,確保代碼質(zhì)量和可靠性變得尤為重要,在本博客中,我們將深入探討如何在 Vue 3 中進行單元測試和集成測試,并提供示例代碼來幫助您上手,需要的朋友可以參考下
2025-01-01
詳解如何在vue項目中引入elementUI組件
這篇文章主要介紹了詳解如何在vue項目中引入elementUI組件,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-02-02
vue長按事件和點擊事件沖突的解決
這篇文章主要介紹了vue長按事件和點擊事件沖突的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-10-10