Vue專案全域性和區域性元件

2021-10-11 15:14:07 字數 962 閱讀 2346

vue專案開發過程中,通常我們會把一些常用或者通用的功能抽取出來作為全域性或者區域性元件,**復用率和專案擴充套件性相對會好一點,下面我們詳細看下具體的定義和使用吧

定義元件內容

新建testcomponent.vue檔案,並新增元件內容

}<

/div>

<

/template>

"stylus" scoped>

//樣式...

<

/style>

export

default

, methods:

}<

/script>

全域性元件

main.js中引入並全域性註冊元件

import testcomponent from

'./testcomponent.vue'

vue.

component

('testcomponent'

, testcomponent)

全域性範圍內可通過的形式呼叫元件

區域性元件

具體頁面中引入並宣告元件,template中新增元件

"test"

>

<

/testcomponent>

<

/div>

<

/template>

import testcomponent from

'./testcomponent'

export

default

,data()

}<

/script>

vue全域性元件和區域性元件

vue元件包括兩種 1 全域性元件,2 區域性元件 區域性元件var 變數名字一定要放在new vue例項外面 1 全域性元件 text align center color red font size 20px margin top 20px 全域性元件直接像上面這樣 註冊 就可以 如果還想註冊繼...

vue 全域性元件和區域性元件

vue.component mycpn cpnc components html lang en head meta charset utf 8 title document title script src js vue.js script head div id mycpn div div id...

VUE註冊全域性元件和區域性元件

全域性元件 第一步 在components資料夾下建立乙個子檔案users.vue class users 第二步 在main.js中進行全域性註冊 the vue build version to load with the import command runtime only or stand...