關于vue.extend的使用及說明
更新時間:2023年03月04日 14:54:41 作者:qq_43634411
這篇文章主要介紹了關于vue.extend的使用及說明,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
1.Vue.extend的使用
- 參數(shù):對象
- 用法:使用Vue構造器,創(chuàng)建一個“子類”,參數(shù)是一個包含組件選項的對象,其中,data選項中必須是函數(shù)
- 描述:Vue.extend返回的是一個“擴展實例構造器”,也就是預設了部分選項的Vue的實例構造器,它常常服務于Vue.component用來生成組件,可以簡單理解為當在模板中遇到該組件作為標簽的自定義元素時,會自動調(diào)用“擴展實例構造器”來生產(chǎn)組件實例,并掛在到自定義元素上
- Vue.extend屬于全局api
- Vue.extend通常用于獨立主鍵開發(fā)
- Vue.extend通常和Vue.extend + $mount一起使用
2.在什么情況下使用Vue.extend
- 組件模板都是事先就創(chuàng)建好的,要是我想從接口動態(tài)渲染組件怎么辦?
- 有內(nèi)容都是在 #app 下渲染,注冊組件都是在當前位置渲染。如果我要實現(xiàn)一個類似于 window.alert() 提示組件要求像調(diào)用 JS 函數(shù)一樣調(diào)用它,該怎么辦?
- 全局組件
3.舉例
比如我們有一個要求就是:實現(xiàn)一個類似于element ui 的 Toast 單框,而element ui 的 Toast 彈框又不能滿足我們現(xiàn)階段的需求,那么就可以使用Vue.extend + $mountl來實現(xiàn)。
如下圖
如上圖所示
建立一個Toast.vue 在這個里面寫你想要的Toast 彈框樣式
<template> <div class="CustToast" :class="type" v-if="showToast"> <span class="icon"> <img :src="iconSrc" /> </span> {{ message }} </div> </template> <script> export default { /** * 自己封裝的Toast v0.2 * params: showToast Boolean 是否激活toast 默認 false * params: type String toast提示類型 共normal success,fail,warning 四個選項 默認normal * params: message String toast消息 * params: duration Number toast顯示時間 默認 3000ms * */ name: 'CustToast', data () { return { showToast: true, type: 'normal', message: '消息提示', duration: 3000 } }, computed: { iconSrc () { window.console.log('當前類型', this.type) const tipType = ['normal', 'success', 'warning', 'fail'] if (tipType.includes(this.type)) { return require(`@/assets/img/common/${this.type}.svg`) } else { // eslint-disable-next-line no-throw-literal throw 'Toast type數(shù)據(jù)只允許為 normal, success, warning, fail 四種其中的一種,默認為normal' } } } } </script> <style scoped> .CustToast { position: fixed; left: 50%; top: 50%; background: rgb(233, 233, 235); padding: 10px; border-radius: 5px; transform: translate(-50%, -50%); animation: show-toast 0.2s; color: #909399; overflow: hidden; display: flex; align-items: center; } @keyframes show-toast { from { opacity: 0; } to { opacity: 1; } } .success { color: #67c23a; background: rgb(225, 243, 216); } .warning { color: #e6a23c; background: rgb(250, 236, 216); } .fail { color: #f56c6c; background: rgb(253, 226, 226); } .icon img { width: 20px; height: 20px; margin-top: 3px; margin-right: 4px; } </style>
新建一個index.js文件
在點js 文件中寫一下代碼
import vue from 'vue' // 導入自定義到Toast組件 import CustToast from './CustToast.vue' // 生成一個擴展實例構造器 const ToastConstructor = vue.extend(CustToast) // 定義彈出組件的函數(shù) 接收三個參數(shù) 消息 toast類型 顯示時間 function showToast (message, type = 'normal', duration = 2000) { // 實例化一個 CustToast.vue const _toast = new ToastConstructor({ data () { return { showToast: true, type: type, message: message, duration: duration } } }) // 把實例化的 CustToast.vue 添加到 body 里 const element = _toast.$mount().$el document.body.appendChild(element) // duration時間到了后隱藏 setTimeout(() => { _toast.showToast = false }, duration) } // 需要在main.js 里面使用 Vue.use(showToast); showToast.install = (Vue) => { // 將組件注冊到 vue 的 原型鏈里去, // 這樣就可以在所有 vue 的實例里面使用 this.$toast() Vue.prototype.$toast = showToast } // 導出 export default showToast
在你的vue項目的 main.js 中導入就可以全局使用了
使用
使用效果
總結
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
Vue3處理錯誤邊界(error boundaries)的示例代碼
在開發(fā) Vue 3 應用時,處理錯誤邊界(Error Boundaries)是一個重要的考量,在 Vue 3 中實現(xiàn)錯誤邊界的方式與 React 等其他框架有所不同,下面,我們將深入探討 Vue 3 中如何實現(xiàn)錯誤邊界,并提供一些示例代碼幫助理解什么是錯誤邊界,需要的朋友可以參考下2024-10-10Vue3組合式API之getCurrentInstance詳解
我們可以通過?getCurrentInstance這個函數(shù)來返回當前組件的實例對象,也就是當前vue這個實例對象,下面這篇文章主要給大家介紹了關于Vue3組合式API之getCurrentInstance的相關資料,需要的朋友可以參考下2022-09-09IDEA中Debug調(diào)試VUE前端項目調(diào)試JS只需兩步
這篇文章主要為大家介紹了在IDEA中Debug調(diào)試VUE前端項目,只需要兩步就可以調(diào)試JS的實現(xiàn)方法,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-02-02