Vue 建立組件的方式

 

Vue 建立組件的方式

2018年08月07日 11:10:56 虔誠帶着決然 閱讀數：1015

 

版權聲明：本文爲博主原創文章，未經博主容許不得用作其餘商業活動。 https://blog.csdn.net/weixin_42218847/article/details/81477836

方式一

<!--1.1使用Vue.extend來建立全局的Vue組件--> var tem1 = Vue.extend({ template:'<h3>這是使用 Vue.extend 建立的組件</h3>' //指定組件要展現的HTML結構 }); <!--1.2使用Vue.component('組件名稱',建立出來的組件模板對象)--> Vue.component('myTem1',tem1); /* <!--注意--> 使用 Vue.component() 定義全局組件的時候， 組件名稱使用 駝峯命名，則在引用組件的時候，須要把大寫改成小寫，而且用 '-'將單詞鏈接 組件名稱不使用駝峯命名，則直接拿名稱來使用便可 */ <!--組合方式--> Vue.component('myTem1',Vue.extend({ template : '<h3>這是使用 Vue.extend 建立的組件</h3>' })) <div id="app"> <!-- 若是要使用組件，直接把組件的名稱以 HTML 標籤的形式，引入到頁面中--> <my-tem1> </my-tem1> </div>

方式二

直接使用Vue.component()

Vue.component('mycom2',{ template : '<h3>這是使用 Vue.component 建立的組件</h3>' })

可是這樣寫會有一個問題：

<!--在h3標籤後緊接一個span標籤的話就會出問題了--> <h3>這是使用 Vue.component 建立的組件</h3> <span>123</span>

這個問題是在 組件template屬性指向的模板內容，必須有且只能有惟一的一個根元素
因此修改代碼以下：

Vue.component('mycom2',{
        template : 
            '<div> <h3>這是使用 Vue.component 建立的組件</h3> <span>123</span> </div>' })

運行結果以下：

不過這種方式也有一個瑕疵，就是template 屬性的值是HTML標籤，而在軟件中，並沒有智能提示，容易出錯，若使用這種方式，須要仔細，避免出錯

方式三

<!--1.定義組件：--> Vue.component('mycom3',{ template : '#tem1' }); <!--2.在被控制的 #app 外面使用 template 元素，定義組建的HTML模板結構--> <div id="app"> <!--3. 引用組件 --> <mycom3></mycom3> </div> <template id="tem1"> <div> <h1>這是 template 元素</h1> <span>這種方式好用</span> </div> </template>

運行結果以下：

這是Vue建立組件(全局)的3種方式，其實相差很少，但願對你們有所幫助

Vue 建立組件的方式

[Vue chuàngjiàn zǔjiàn de fāngshì]

How Vue creates components