使用vue組件封裝共用的組件
更新時間：2022年05月27日 11:49:10 作者：養(yǎng)只貓
這篇文章主要介紹了使用vue組件封裝共用的組件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
這里提供兩種vue封裝共用組件的方法
方法一
main.js中
import ListItem from './components/list.vue'//封裝共用組件方法一
Vue.component('ListItem',ListItem)方法二
新建vue文件的時候再建個相應(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)
通過上面的兩種方法定義公共組件后都可以直接<child>和<component>這樣調(diào)用組件了，無需在每個vue文件中important組件了。
說說方法二吧根據(jù)官方文檔提供的api
vue使用install定義安裝全局組件需要install和use這兩個api來配合才能完成。我更喜歡第一種但是今天看了公司的代碼認(rèn)識到了第二種方法，也發(fā)現(xiàn)了vue提供了不少提高生產(chǎn)效率的api往后會繼續(xù)深入去學(xué)習(xí)這些api。
同時也解決了一個困惑很長時間的問題，element ui中的message這個組件不需要vue.use安裝直接就能用，因為element源碼中直接將這個組件賦值到vue的prototype上了，其他的組件都只export 暴露出install方法所以其他組件需要vue.use安裝
vue封裝公共組件調(diào)用方法
需求：項目中所有的提示信息都是彈框樣式的，并且顯示兩秒后自動消失
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"; //引入組件
// 返回一個“擴展實例構(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)用時 this.$toast("新內(nèi)容", 1000);
};
export default myToast;
在main.js中全局注冊
import toast from "./components/dialogMessage.js"; //引入toast函數(shù) //給Vue對象添加$toast方法 Vue.prototype.$toast = toast;
頁面中使用，像使用message一樣
this.$toast("新內(nèi)容", 1000);
效果
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue中使用$http.post請求傳參的錯誤及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue實現(xiàn)路由切換改變title功能，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-05-05
今天小編就為大家分享一篇vue-cli監(jiān)聽組件加載完成的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
解決element-ui的el-select選擇器的@blur事件失效的坑
這篇文章主要介紹了解決element-ui的el-select選擇器的@blur事件失效的坑，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了vue菜單欄自適應(yīng)折疊,我這里使用的是el-menu導(dǎo)航菜單，監(jiān)聽頁面寬度的改變，來改變導(dǎo)航菜單的折疊和展開，本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-01-01
vue3中引入新的組件傳值方式,就是provide/inject依賴注入模式,本文主要介紹了vue3+ts 依賴注入provide inject的用法,感興趣的可以了解一下2023-11-11
這篇文章主要為大家詳細(xì)介紹了Vue3實現(xiàn)圖片放大鏡效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)驗證用戶名是否可用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-01-01
學(xué)過?vue2?的寶子們應(yīng)該都清楚，計算屬性這個東西在項目開發(fā)過程中使用的還是比較頻繁的，使用頻率相對來說比較高。本文就來為大家介紹一下Vue3中計算屬性的用法，需要的可以參考一下2022-07-07
這篇文章主要為大家介紹了vue使用websocket概念及示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09