Vue元件之全域性元件與區域性元件

2022-01-13 08:46:00 字數 1244 閱讀 5360

元件 (component) 是 vue.js 最強大的功能之一。元件可以擴充套件 html 元素,封裝可重用的**。在較高層面上,元件是自定義元素,vue.js 的編譯器為它新增特殊功能。在有些情況下,元件也可以是原生 html 元素的形式,以 is 特性擴充套件。個人認為就是乙個可以重複利用的結構層**片段。

全域性元件註冊方式:vue.component(元件名,)

eg:渲染結果:

這裡需要注意:

1.全域性元件必須寫在vue例項建立之前,才在該根元素下面生效;

eg:2.模板裡面第一級只能有乙個標籤,不能並行;

這樣子會報錯,並且只會渲染第乙個標籤h1;我們應該這樣子寫:

區域性元件註冊方式,直接在vue例項裡面註冊

eg:區域性元件需要注意:

1.屬性名為components,s千萬別忘了;

2.套路比較深,所以建議模板定義在乙個全域性變數裡,**看起來容易一點,如下:(模板標籤比較多的時候,這樣子寫更加簡潔規整)

關於元件中的其他屬性,可以和例項中的一樣,但是data屬性必須是乙個函式:

eg:顯示結果:

全域性元件和區域性元件一樣,data也必須是乙個函式:

顯示結果:

當使用 dom 作為模板時 (例如,將 el 選項掛載到乙個已存在的元素上),你會受到 html 的一些限制,因為 vue 只有在瀏覽器解析和標準化 html 後才能獲取模板內容。尤其像這些元素

渲染結果為:

對於全域性與區域性的作用域問題,我們可以這樣理解,只要變數是在元件內部用的,這些變數必須是元件內部的,而在外部html結構中引用的變數,都引用的是該掛載下的例項裡面的變數

eg:彈出框顯示:我是區域性

vue中所謂的全域性指的是該掛載下的區域;

下面這種做法是錯誤的,按我的想法覺得應該會彈出:我是全域性,但是卻報錯,也就是說元件處於全域性下不可以新增預設事件,要用全域性的事件函式,必須父子通訊

額外話題:

1.函式return後面必須跟返回的內容,不能換行寫

eg:下面這種寫法不會返值回來:

2.vue和小程式等一樣,採用es6的函式寫法,this指向是不一樣的

es6結果:

第乙個this指的是vue例項

第二個this指的是window

由於它和小程式不一樣,我發現在data裡面this指的是window,在methods裡面this才是vue例項

所以建議大家用es5寫吧

new vue(,

})

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

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

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

使用範圍 全域性元件使用範圍 可以在頁面中任何位置使用 前提是div的id跟vue例項繫結過 區域性元件使用範圍 只能在定義它的el中使用,不能再其他位置使用,否則就無法生效 定義元件的方法 全域性元件 可以使用vue.component tagname,options 定義全域性元件 區域性元件 ...

詳解vue元件(一)全域性元件與區域性元件

全域性元件的形式如下 childrenone 我是元件a p div template vue.component children a template 也可以直接寫乙個template的id template childrenone 其中vue.component 的第乙個引數為元件名,以後可以...