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

2021-09-16 12:57:03 字數 1675 閱讀 4133

全域性註冊方式:

//註冊

vue.component('component-a',)

//全域性使用。

區域性註冊方式:

//註冊

var acomp={}

//在例項中定義

components:

})

全域性註冊的元件,vue 根例項 (new vue) 的中使用。缺點:註冊了的全域性元件,就算不需要用到,仍會占用內存在註冊之後可以用可以在任何新建立的

vue.component('component-a', )

vue.component('component-b', )

vue.component('component-c', )

1.單獨宣告元件。用js  物件註冊元件

2.直接在例項中components註冊

var componenta = 

var componentb =

var componentc =

new vue(

})

在掛載的元素中使用元件

new vue(

}})

注意:區域性註冊的元件在其子元件中不可用。例如,如果你希望componentacomponentb中可用,則你需要這樣寫:

var componenta = 

var componentb = ,

// ...

}

或者;如果你通過 babel 和 webpack 使用 es2015 模組(import 和 export default),應該這樣寫:

import componenta from './componenta.vue'

export default ,

// ...

}

注意:在 es2015+ 中,在物件中放乙個類似componenta的變數名其實是componenta: componenta的縮寫,即這個變數名同時是:

使用了諸如 babel 和 webpack 的模組系統

建立乙個components目錄,並將每個元件放置在其各自的檔案中。

然後你需要在區域性註冊之前,在 main.js 檔案匯入每個你想使用的元件。

import basebutton from './basebutton.vue'

import baseicon from './baseicon.vue'

import baseinput from './baseinput.vue'

export default

}

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

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

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

1.新建components目錄,方便管理和修改 2.component資料夾下新建vueaudio元件,注意要用駝峰命名法或者短橫線命名法 export default 3.引用元件 import vueaudio from components vueaudio export default 1...

Vue 全域性註冊子元件與區域性註冊子元件

vue註冊全域性子元件和區域性子元件 ps 這裡是使用vue cli搭建的vue開發目錄 1vue註冊全域性子元件 第1步 建立子元件,如下 全域性子元件 第二步 在main.js中註冊子元件,如下 main.js中的 import head from components head header ...