使用vue組件封裝共用的組件
這里提供兩種vue封裝共用組件的方法
方法一
main.js中
import ListItem from './components/list.vue'//封裝共用組件方法一 Vue.component('ListItem',ListItem)
方法二
新建vue文件的時候再建個相應的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)
通過上面的兩種方法定義公共組件后都可以直接<child>和<component>這樣調用組件了,無需在每個vue文件中important組件了。
說說方法二吧根據(jù)官方文檔提供的api
vue使用install定義安裝全局組件需要install和use這兩個api來配合才能完成。我更喜歡第一種但是今天看了公司的代碼認識到了第二種方法,也發(fā)現(xiàn)了vue提供了不少提高生產效率的api往后會繼續(xù)深入去學習這些api。
同時也解決了一個困惑很長時間的問題,element ui中的message這個組件不需要vue.use安裝直接就能用,因為element源碼中直接將這個組件賦值到vue的prototype上了,其他的組件都只export 暴露出install方法所以其他組件需要vue.use安裝
vue封裝公共組件調用方法
需求:項目中所有的提示信息都是彈框樣式的,并且顯示兩秒后自動消失
vue頁面
<template> ? <!-- 公用提示信息頁面 --> ? <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頁面
// 公共提示信息js import Vue from "vue"; import Toast from "./dialogMessage.vue"; //引入組件 // 返回一個“擴展實例構造器” 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); // 調用時 this.$toast("新內容", 1000); }; export default myToast;
在main.js中全局注冊
import toast from "./components/dialogMessage.js"; //引入toast函數(shù) //給Vue對象添加$toast方法 Vue.prototype.$toast = toast;
頁面中使用,像使用message一樣
this.$toast("新內容", 1000);
效果
以上為個人經驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
vue?button的@click方法無效鉤子函數(shù)沒有執(zhí)行問題
這篇文章主要介紹了vue?button的@click方法無效鉤子函數(shù)沒有執(zhí)行問題及解決,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-03-03Element基于el-input數(shù)字范圍輸入框的實現(xiàn)
本文主要介紹了?Element基于el-input數(shù)字范圍輸入框的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-04-04Vue3?實現(xiàn)驗證碼倒計時功能(刷新保持狀態(tài))
倒計時的運用場景是需要經常用到的,但是根據(jù)業(yè)務的不同,好比手機驗證碼或者是郵箱驗證碼之類的,即使用戶跳轉到其它頁面或者刷新,再次回到登錄也,驗證碼的倒計時也得保持狀態(tài),下面通過本文給大家分享Vue3?驗證碼倒計時功能實現(xiàn),感興趣的朋友一起看看吧2022-08-08Vue 實現(xiàn)點擊空白處隱藏某節(jié)點的三種方式(指令、普通、遮罩)
最近小編接到這樣的需求:彈出框(或Popover)在 show 后,點擊空白處可以將其 hide。針對這個需求,小編整理了三種實現(xiàn)方式,如果大家對vue 點擊空白隱藏節(jié)點問題感興趣的朋友跟隨小編一起看看吧2019-10-10