Vue 元件註冊

2022-07-10 21:51:09 字數 1210 閱讀 4325

全域性元件

全域性元件註冊語法

components中的兩個引數元件名稱和元件內容

vue.component(元件名稱, )

全域性元件註冊應用

元件建立:

vue.component('button-counter', 

},template: '點選了}次',

methods: }})

var vm = new

vue(

});

如何在頁面中運用,直接在頁面中應用元件名稱

這個元件是可以重用的,直接在頁面中多次使用,切資料相互獨立,互不干擾

元件註冊注意事項

data必須是乙個函式

元件模板內容必須是單個根元素

元件模板內容可以是模板字串

元件命名方式

vue.component('my-component',)

vue.component('mycomponent',)

如果使用駝峰式命名元件,那麼在使用元件的時候,只能在字串模板中用駝峰的方式使用元件,但是在普通的標籤模板中,必須使用短橫線的方式使用元件

區域性元件

區域性元件只能在註冊它的父元件中使用

區域性元件註冊語法

var componenta = 

var componentb =

var componentc =

newvue(

})

元件的建立

vue.component('test-com',);

var helloworld =

},template: '}

'};

var hellotom =

},template: '}

'};

var hellojerry =

},template: '}

'};

var vm = new

vue(,

components:

});

頁面中的應用

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註冊元件

下面是建立乙個新的構造器,元件構造器 const hello vue.extend my hello元件註冊,第二個引數傳入的是擴充套件的構造器 vue.component my hello hello my world元件註冊,第二個引數傳入的是選項物件 vue.component my worl...