使用vue組件封裝共用的組件
這里提供兩種vue封裝共用組件的方法
方法一
main.js中
import ListItem from './components/list.vue'//封裝共用組件方法一 Vue.component('ListItem',ListItem)
方法二
新建vue文件的時(shí)候再建個(gè)相應(yīng)的js文件。
component.js
import child from './component.vue' export default child.install = function (Vue) { Vue.component(child.name,child) }
main.js中
import child from './components/component/component.js'//封裝共用組件方法二 Vue.use(child)
通過(guò)上面的兩種方法定義公共組件后都可以直接<child>和<component>這樣調(diào)用組件了,無(wú)需在每個(gè)vue文件中important組件了。
說(shuō)說(shuō)方法二吧根據(jù)官方文檔提供的api
vue使用install定義安裝全局組件需要install和use這兩個(gè)api來(lái)配合才能完成。我更喜歡第一種但是今天看了公司的代碼認(rèn)識(shí)到了第二種方法,也發(fā)現(xiàn)了vue提供了不少提高生產(chǎn)效率的api往后會(huì)繼續(xù)深入去學(xué)習(xí)這些api。
同時(shí)也解決了一個(gè)困惑很長(zhǎng)時(shí)間的問(wèn)題,element ui中的message這個(gè)組件不需要vue.use安裝直接就能用,因?yàn)閑lement源碼中直接將這個(gè)組件賦值到vue的prototype上了,其他的組件都只export 暴露出install方法所以其他組件需要vue.use安裝
vue封裝公共組件調(diào)用方法
需求:項(xiàng)目中所有的提示信息都是彈框樣式的,并且顯示兩秒后自動(dòng)消失
vue頁(yè)面
<template> ? <!-- 公用提示信息頁(yè)面 --> ? <el-dialog ? ? title="提示" ? ? :visible.sync="dialogVisible" ? ? :show-close="false" ? ? top="40vh" ? ? width="30%" ? > ? ? <div class="content"> ? ? ? <span>{{ text }}</span> ? ? </div> ? </el-dialog> </template>
<script> export default { ? data() { ? ? return { ? ? ? dialogVisible: true, ? ? ? text: "" ? ? }; ? } }; </script>
<style lang="less" scoped> .content { ? font-size: 16px; ? color: #333; ? text-align: center; ? span { ? ? margin-left: 10px; ? } } /deep/ .el-dialog__header { ? padding: 0; ? height: 50px; ? line-height: 50px; ? text-align: center; ? font-weight: 600; ? background-color: #08519c; } /deep/ .el-dialog__title { ? color: #fff; } </style>
js頁(yè)面
// 公共提示信息js import Vue from "vue"; import Toast from "./dialogMessage.vue"; //引入組件 // 返回一個(gè)“擴(kuò)展實(shí)例構(gòu)造器” let ToastConstructor = Vue.extend(Toast); let myToast = (text, duration) => { let toastDom = new ToastConstructor({ el: document.createElement("div") //將toast組件掛載到新創(chuàng)建的div上 }); document.body.appendChild(toastDom.$el); //把toast組件的dom添加到body里 toastDom.text = text; toastDom.duration = duration; // 在指定 duration 之后讓 toast消失 setTimeout(() => { toastDom.dialogVisible = false; }, toastDom.duration); // 調(diào)用時(shí) this.$toast("新內(nèi)容", 1000); }; export default myToast;
在main.js中全局注冊(cè)
import toast from "./components/dialogMessage.js"; //引入toast函數(shù) //給Vue對(duì)象添加$toast方法 Vue.prototype.$toast = toast;
頁(yè)面中使用,像使用message一樣
this.$toast("新內(nèi)容", 1000);
效果
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue與Node.js通過(guò)socket.io通信的示例代碼
這篇文章主要介紹了Vue與Node.js通過(guò)socket.io通信的示例代碼,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07vue?button的@click方法無(wú)效鉤子函數(shù)沒(méi)有執(zhí)行問(wèn)題
這篇文章主要介紹了vue?button的@click方法無(wú)效鉤子函數(shù)沒(méi)有執(zhí)行問(wèn)題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-03-03Element基于el-input數(shù)字范圍輸入框的實(shí)現(xiàn)
本文主要介紹了?Element基于el-input數(shù)字范圍輸入框的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04Vue3?實(shí)現(xiàn)驗(yàn)證碼倒計(jì)時(shí)功能(刷新保持狀態(tài))
倒計(jì)時(shí)的運(yùn)用場(chǎng)景是需要經(jīng)常用到的,但是根據(jù)業(yè)務(wù)的不同,好比手機(jī)驗(yàn)證碼或者是郵箱驗(yàn)證碼之類(lèi)的,即使用戶跳轉(zhuǎn)到其它頁(yè)面或者刷新,再次回到登錄也,驗(yàn)證碼的倒計(jì)時(shí)也得保持狀態(tài),下面通過(guò)本文給大家分享Vue3?驗(yàn)證碼倒計(jì)時(shí)功能實(shí)現(xiàn),感興趣的朋友一起看看吧2022-08-08Vue 實(shí)現(xiàn)點(diǎn)擊空白處隱藏某節(jié)點(diǎn)的三種方式(指令、普通、遮罩)
最近小編接到這樣的需求:彈出框(或Popover)在 show 后,點(diǎn)擊空白處可以將其 hide。針對(duì)這個(gè)需求,小編整理了三種實(shí)現(xiàn)方式,如果大家對(duì)vue 點(diǎn)擊空白隱藏節(jié)點(diǎn)問(wèn)題感興趣的朋友跟隨小編一起看看吧2019-10-10Vue3實(shí)現(xiàn)地圖選點(diǎn)組件的示例代碼
這篇文章主要為大家詳細(xì)介紹了Vue3實(shí)現(xiàn)地圖選點(diǎn)組件的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01