Vue 元件和外掛程式的關係

2021-08-26 20:44:49 字數 957 閱讀 8022

我們通常在src的目錄下,新建乙個component資料夾來存放公共的元件,在我們要使用元件的頁面中引入元件,並且進行乙個說明。元件個呼叫它的頁面之間的通訊,就是父元件和子元件的通訊方式。

import rule from '../../components/rule.vue'

export default ,

data ()

}}

vue外掛程式的編寫方法的四類:

export default 

vue.directive('my-directive',

...})

vue.mixin(

...})

vue.prototype.$mymethod = function (options)

}}

這裡想具體介紹乙個資訊提示框的外掛程式的編寫及使用過程,其他的外掛程式舉一反三即可,無非就是邏輯更加複雜。

我們在src/componnets的資料夾中,建立乙個 toast.vue

}}

取消確認

在src/plugins 中建立乙個 toast.js
/*eslint-disable*/

import toastcomponent from '@/components/toast.vue'

// let $vm

export default

}}

在main.js 中使用外掛程式

import toastplugin from './plugins/toast.js'

vue.use(toastplugin)

這樣我們就可以在全域性使用了。

this.$showtoast ('彈窗標題', '這裡顯示提示的內容')

Vue元件通訊(關係元件和非關係元件)

元件是vue的乙個重要概念,有效的利用了封裝的思想 可以模擬js的函式或者類 我們通常會把乙個單頁應用中的各種模組拆分成乙個乙個單獨的元件,利用這些元件組裝成乙個完整的功能,具有很好的復用性和維護性。既然是封裝就涉及輸入和輸出,而多個元件之間如何處理輸入和輸出是我們經常會面臨到的問題,也是我們經常說...

vue命令式元件和外掛程式編寫

一直在寫各種業務,好多基本用法都忘記了,回顧一下 一 vue各種ui庫里的命令式元件比如element ui裡notification元件,可以這樣呼叫 this notify 命令式呼叫的元件寫法分三步 這裡簡單寫個message元件演示一下 1.編寫message.vue檔案 class mes...

vue 例項與元件的關係

建立vue例項 var vm new vue 官方 乙個 vue 應用由乙個通過new vue建立的根 vue 例項,以及可選的巢狀的 可復用的元件樹組成。建立元件 定義乙個名為 button counter 的新元件 vue.component button counter template yo...