Vue 元件的註冊

2021-09-25 17:30:18 字數 984 閱讀 8972

一、 vue如何實現元件

通過例項化vue構造器函式得到乙個vue例項,這個例項我們稱之為 " 根例項 ",它是最大的父級

這個根例項是以標籤的形式存在的,那麼我們也稱之為 " 根元件 "

根例項也是乙個元件,但是我們得到只是跟元件

vue.extend( ) 它就是對vue功能的擴充套件,這個擴充套件就是元件

vue是通過 vue.extend( ) 來實現【 擴充套件 】 vue的功能的,這個功能就是元件

思考: vue.extend如何使用?

- 通過new vue.extend () 發現和 new vue 一樣了 排除

- 元件就是乙個以標籤化呈現的東西,所以我應該像標籤一樣使用

- 但是無論是 html3 還是 html5 肯定不會同意它隨意來個標籤的

- vue會將元件編譯成html結構

- vue的這個處理過程,我們稱之為 " 元件註冊 "

總結:vue是通過vue.extend() 來實現元件的

vue的元件的使用時需要註冊的

二、vue – 元件的註冊

全域性註冊的格式:vue.component ( 』 元件的名稱 』 , 元件的配置 )

效果顯示如下:

三、簡寫:

const hello = vue.extend()

vue.component('hello', hello)

以上** 簡寫如下:

vue.component('hello', )

四、區域性:區域性註冊使用 components 選項來完成

區域性註冊只在當前註冊的例項範圍內有效

components:

new vue(}})

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 如何在頁面中運...