Vue元件之全域性元件與區域性元件的使用詳解

2022-09-20 20:54:09 字數 1104 閱讀 5704

元件 (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中所謂的全域性指的是該掛載下的區域;

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

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

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

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 定義全域性元件 區域性元件 ...