vue元件(全域性,區域性,動態載入元件)

2021-08-26 20:30:40 字數 1058 閱讀 4954

vue元件有兩種,一種是全域性元件,一種是區域性元件。整個專案經常用到的用全域性寫法,用到比較少的專供特定頁面用的使用區域性元件。

one----全域性元件引入寫法:在專案的main.js中:

第一種,在main.js直接寫template:' 模版字串'

vue.component('tab-home', )

vue.component('tab-posts', ,

three----動態元件(tab切換  使用:is="currenttabcomponent")

v-for="tab in tabs"

v-bind:key="tab"

v-bind:class="['tab-button', ]"

v-on:click="currenttab = tab"

>}

v-bind:is="currenttabcomponent"

class="tab"

>

export default ,

data ()

樣式:.tab-button {

padding: 6px 10px;

border-top-left-radius: 3px;

border-top-right-radius: 3px;

border: 1px solid #ccc;

cursor: pointer;

background: #f0f0f0;

margin-bottom: -1px;

margin-right: -1px;

.tab-button:hover {

background: #e0e0e0;

.tab-button.active {

background: #e0e0e0;

.tab {

border: 1px solid #ccc;

padding: 10px;

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

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

vue全域性元件與區域性元件

vue對元件的定義 元件是可復用的 vue 例項 元件之間是互不影響的,乙個元件的崩潰,並不會影響整個專案的執行。全域性元件 button add button add div src vue.js script 註冊全域性物件,要寫在vue例項的上面 vue.component button ad...

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...