數據驅動和組件化是vue.js兩個最重要的特點。組件化是為了方便代碼復用，提高開發效率。常見的vue組件寫法有四種，各有特色，適用于不同的場景。
結構：
// 組件的注冊 Vue.component( 'componentName', { template: // 組件的html結構, data(){ return{ // 組件中的屬性 } }, method: { // 組件中的方法 } ...... // 組件其他的屬性和方法 }) // 組件的使用 new Vue({ el: '#app' }) 在script標簽內通過Vue.component()定義一個全局組件，并通過new Vue()實例將組件應用到html文件中id為app的標簽內。
特點：
<1>可以直接在html文件中的script標簽內直接定義與使用；
<2>通過該方法定義的組件是全局組件，在任何Vue實例下都可以使用，適合項目比較簡單的場景；
<3>每次定義組件時都要重新使用Vue.component()，且組件名不能相同；
實例：
Welcome組件
結構：
// 構造組件對象 const componentName = { template: // 組件的html結構, data(){ return{ // 組件中的屬性 } }, method: { // 組件中的方法 } ...... // 組件其他的屬性和方法 } // 組件的使用 new Vue({ el: '#app', components: { // 組件注冊、調用 componentName } }) 在script標簽中通過定義一個組件對象，并通過Vue實例中components屬性將該組件注冊調用。
特點：
<1>與全局方式定義的組件相似，都可以直接在html文件中的script標簽中直接書寫組件與使用；
<2>只有在注冊過的Vue實例中才能使用該組件；
實例：
Welcome組件
結構：
<template id="componnet"> // 組件的html結構 </template> // 全局組件的注冊與使用 Vue.component( 'componentName', { template: '#component', data(){ return{ // 組件中的屬性 } }, method: { // 組件中的方法 } ...... // 組件其他的屬性和方法 }) new Vue({ el: '#app' }) // 局部組件的注冊與使用 const componentName = { template: '#component', data(){ return{ // 組件中的屬性 } }, method: { // 組件中的方法 } ...... // 組件其他的屬性和方法 } new Vue({ el: '#app', components: { // 組件注冊、調用 componentName } }) 使用template標簽將組件中的html結構寫在body標簽內部，在script標簽內按照全局組件和局部組件的方式注冊與使用。不同之處在于組件中template屬性是通過id引用。
特點：
<1>js文件中不包含html結構內容，實現結構與邏輯分離；
實例：
Welcome組件
結構：
<template lang="html"> // 組件中的html結構 </template> <script> //組件的邏輯 export default { // 組件的屬性和方法 } </script> <style lang="css" scoped> // 組件的樣式 </style> 創建一個尾綴為vue的文件，文件名即為組件名。組件內包含三部分內容：html結構、js邏輯、css樣式，分別對應于不同的標簽。使用時組件時，通過import引入即可使用。
特點：
<1>組件與組件之間互不影響，復用性高，其html、css、js均可復用；
<2>組件的結構、邏輯清晰；
<3>適用于大型復雜項目，適合多人開發；
實例：
Welcome組件
！！！需要注意的是：template標簽內必須用一個標簽將所有的標簽包裹，否則會報錯
正確的寫法：
<template> <div> <div></div> ...... <div></div> </div> </template>
錯誤的寫法：
<template> <div></div> <div></div> ...... <div></div> </template>
總結
以上所述是小編給大家介紹的vue組件的寫法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
