Vue 元件(一)全域性元件和區域性元件

2022-09-20 00:39:13 字數 1263 閱讀 4756

根據vue官方文件:元件(component)是vue.js最強大的功能之一。元件可以擴充套件html元素,封裝可重用的**。在較高層面上,元件是自定義元素。

按我當前學習程度的理解,元件就是定義乙個自己的新標籤,新標籤可以在html**中使用。

全域性宣告元件

vue.component('my-component-button1', );

vue(

繫結dom元素

);

區域性宣告元件,區域性宣告的元件則只能讓註冊該元件的vue例項使用。

var localcomponent =

vue(

})

html:

<

div

id>

<

my-component-button1

>

my-component-button1

>

div>

<

div

id>

<

my-component-button2

>

my-component-button2

>

div>

兩個元件分別被渲染為:

<

div

id>

<

button

>myfirstcomponent

button

>

div>

<

div

id>

<

button

>myfirstlocalcomponent

button

>

div>

需要注意:模板的名字最好不要用駝峰式命名(camelcase),使用短橫線分隔式命名(kebab-case)。

#元件組合

來自vue官方文件:

元件設計初衷就是要配合使用的,最常見的就是形成父子元件的關係:元件 a 在它的模板中使用了元件 b。它們之間必然需要相互通訊:父元件可能要給子元件下發資料,子元件則可能要將它內部發生的事情告知父元件。然而,通過乙個良好定義的介面來盡可能將父子元件解耦也是很重要的。這保證了每個元件的**可以在相對隔離的環境中書寫和理解,從而提高了其可維護性和復用性。

在 vue 中,父子元件的關係可以總結為prop

vue全域性元件和區域性元件

vue元件包括兩種 1 全域性元件,2 區域性元件 區域性元件var 變數名字一定要放在new vue例項外面 1 全域性元件 text align center color red font size 20px margin top 20px 全域性元件直接像上面這樣 註冊 就可以 如果還想註冊繼...

vue 全域性元件和區域性元件

vue.component mycpn cpnc components html lang en head meta charset utf 8 title document title script src js vue.js script head div id mycpn div div id...

VUE註冊全域性元件和區域性元件

全域性元件 第一步 在components資料夾下建立乙個子檔案users.vue class users 第二步 在main.js中進行全域性註冊 the vue build version to load with the import command runtime only or stand...