Vue元件的建立與註冊

2021-09-24 13:35:15 字數 2207 閱讀 6182

元件優勢:

元件化和模組化的不同

vue.js的元件的使用有3個步驟:

使用 vue.extend 配合 vue.component 方法:

>

>

my-com1

>

//使用元件,直接呼叫元件名即可

div>

// 使用 vue.extend 來建立元件構造器

var com1 = vue.

extend()

vue.

component

('mycom1'

, com1)

// vue.component('元件名稱', 建立出來的元件模板物件)

// 如果使用 vue.component 定義全域性元件的時候,元件名稱使用了 駝峰命名,則在引用元件的時候,

// 需要把 大寫的駝峰改為小寫的字母,同時,兩個單詞之前,使用 - 鏈結;

// 如果不使用駝峰,則直接拿名稱來使用即可; vue.component('mycom1', com1)

//或者直接如下(合併為一步):

vue.

component

('mycom1'

, vue.

extend()

)

直接使用 vue.component 方法:

省去了 vue.extend(),直接寫物件,簡單,但無智慧型提示

>

>

mycom2

>

div>

>

// 注意:不論是哪種方式建立出來的元件,元件的 template 屬性指向的模板內容,必須有且只能有唯一的乙個根元素

vue.

component

('mycom2',)

// 建立 vue 例項,得到 viewmodel

var vm =

newvue(,

methods:})

;script

>

使用 script標籤或者template 元素,定義元件的html模板結構

>

>

mycom3

>

div>

"tmpl"

>

>

>

這是通過 template 元素,在外部定義的元件結構,這個方式,有**的智慧型提示和高亮h1

>

div>

template

>

>

vue.

component

('mycom3',)

// 建立 vue 例項,得到 viewmodel

var vm =

newvue(,

methods:})

;script

>

和使用方式是一樣的,使用template相對簡單些

注意:使用標籤時,type指定為text/x-template,意在告訴瀏覽器這不是一段js指令碼,瀏覽器在解析html文件時會忽略

// 通過 物件 字面量的形式, 定義了乙個 元件模板物件

var login =

// vue.component('mylogin', login) //用法一,全域性註冊

var vm =

newvue(,

methods:

, components:})

;

'box'

>

>

parent

>

div>

>

// 元件的模板物件

var child =

var parent =

} vue.

component

('parent'

, parent)

/*全域性註冊該父元件*/

newvue()

script

>

Vue元件註冊

方式一 vue.component my component name 方式二 vue.component mycomponentname 方式一 在dom中可以直接用,是有效的元素 方式二 可用在單檔案元件中 single file component 元件註冊後,可在全域性使用,並且全域性元件之...

vue元件註冊

我們會在多個頁面使用button,每個頁面寫起來很麻煩,如果想把它做成乙個公用元件,使用時直接呼叫會比較方便。現在建立了乙個元件button.vue。找到main.js檔案,然後輸入如下 import button from components button.vue vue.component m...

Vue 元件註冊

全域性元件 全域性元件註冊語法 components中的兩個引數元件名稱和元件內容 vue.component 元件名稱,全域性元件註冊應用 元件建立 vue.component button counter template 點選了 次 methods var vm new vue 如何在頁面中運...