vue抽出組件并傳值實(shí)例
使用父組件向子組件傳值的方式
1,抽出的組件以及寫(xiě)法
2,注冊(cè)使用的父組件以及傳值,父組件return images
補(bǔ)充知識(shí):vue如何抽取公共組件并全局注冊(cè)
項(xiàng)目的抽象程度越高,代碼修改起來(lái)就越方便,如何抽取一個(gè)公共的組件并且全局注冊(cè)呢?
步驟
結(jié)構(gòu)圖
公共組件代碼
<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// 播放時(shí)間 //countWifi:0 // 替換圖片索引 }; }, methods: { wifiBrightClick() { var vm=this; clearInterval(this.intervalIdWifi); //清除計(jì)時(shí)器 vm.intervalIdWifi = null; //設(shè)置為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); //清除計(jì)時(shí)器 vm.intervalIdWifi = null; //設(shè)置為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文件中注冊(cè)
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)
實(shí)際應(yīng)用
<wifiBright class="wifiLook" ref="wifiBright" @click.native="soundClick()" v-show="showImg"></wifiBright>
成功!
以上這篇vue抽出組件并傳值實(shí)例就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue實(shí)現(xiàn)div可拖動(dòng)位置也可改變盒子大小的原理
這篇文章主要介紹了vue實(shí)現(xiàn)div可拖動(dòng)位置也可改變盒子大小,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-09-09Composition API思想封裝NProgress示例詳解
這篇文章主要為大家介紹了Composition API思想封裝NProgress示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08elementUI中的$confirm調(diào)換兩個(gè)按鈕位置的實(shí)例代碼
這篇文章主要介紹了elementUI中的$confirm調(diào)換兩個(gè)按鈕位置的實(shí)例代碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-03-03Vue3+Element?Plus實(shí)現(xiàn)動(dòng)態(tài)標(biāo)簽頁(yè)以及右鍵菜單功能
這篇文章主要給大家介紹了關(guān)于Vue3+Element?Plus實(shí)現(xiàn)動(dòng)態(tài)標(biāo)簽頁(yè)以及右鍵菜單功能的相關(guān)資料,Vue?3和Element?Plus提供了一種簡(jiǎn)單的方法來(lái)實(shí)現(xiàn)側(cè)邊菜單欄與標(biāo)簽頁(yè)之間的聯(lián)動(dòng),文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-09-09Vue3中defineEmits、defineProps?不用引入便直接用
這篇文章主要介紹了Vue3中defineEmits、defineProps?不用引入便直接用,文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的小伙伴可以參考一下2022-09-09基于vue.js仿淘寶收貨地址并設(shè)置默認(rèn)地址的案例分析
這篇文章主要介紹了基于vue.js仿淘寶收貨地址并設(shè)置默認(rèn)地址的案例分析,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-08-08