方式：1、利用“Vue.extend”創建全局的vue組件，語法為'Vue.component('組件名',創建出來的組件模板對象)；2、利用“Vue.component”創建組件；3、利用template元素，定義組件的HTML模板結構。

本文操作環境：windows10系統、Vue2.9.6版，DELL G3電腦。

vue創建組件的幾種方式是什么

1、使用 Vue.extend 來創建全局的Vue組件

<div id="app">     <!-- 如果要使用組件，直接，把組件的名稱，以 HTML 標簽的形式，引入到頁面中，即可 -->     <mycom1></mycom1>   </div>   <script>     // 1.1 使用 Vue.extend 來創建全局的Vue組件     // var com1 = Vue.extend({     //   template: '<h3>這是使用 Vue.extend 創建的組件</h3>' // 通過 template 屬性，指定了組件要展示的HTML結構     // })     // 1.2 使用 Vue.component('組件的名稱', 創建出來的組件模板對象)     // Vue.component('myCom1', com1)     // 如果使用 Vue.component 定義全局組件的時候，組件名稱使用了 駝峰命名，則在引用組件的時候，需要把 大寫的駝峰改為小寫的字母，同時，兩個單詞之前，使用 - 鏈接；     // 如果不使用駝峰,則直接拿名稱來使用即可;     // Vue.component('mycom1', com1)     // Vue.component 第一個參數:組件的名稱,將來在引用組件的時候,就是一個 標簽形式 來引入 它的     // 第二個參數: Vue.extend 創建的組件  ,其中 template 就是組件將來要展示的HTML內容     Vue.component('mycom1', Vue.extend({       template: '<h3>這是使用 Vue.extend 創建的組件</h3>'     }))     // 創建 Vue 實例，得到 ViewModel     var vm = new Vue({       el: '#app',       data: {},       methods: {}     });   </script>

2、直接使用 Vue.component 創建

  <div id="app">     <!-- 還是使用 標簽形式,引入自己的組件 -->     <mycom2></mycom2>   </div>   <script>     // 注意:不論是哪種方式創建出來的組件,組件的 template 屬性指向的模板內容,必須有且只能有唯一的一個根元素     Vue.component('mycom2', {       template: '<div><h3>這是直接使用 Vue.component 創建出來的組件</h3><span>123</span></div>'     })     // 創建 Vue 實例，得到 ViewModel     var vm = new Vue({       el: '#app',       data: {},       methods: {}     });   </script>

3、 在被控制的 #app 外面,使用 template 元素,定義組件的HTML模板結構

<div id="app">     <mycom3></mycom3>     <!-- <login></login> -->   </div>   <div id="app2">     <mycom3></mycom3>     <login></login>   </div>   <!-- 在被控制的 #app 外面,使用 template 元素,定義組件的HTML模板結構  -->   <template id="tmpl">     <div>       <h1>這是通過 template 元素,在外部定義的組件結構,這個方式,有代碼的只能提示和高亮</h1>       <h4>好用,不錯!</h4>     </div>   </template>   <template id="tmpl2">     <h1>這是私有的 login 組件</h1>   </template>   <script>     Vue.component('mycom3', {       template: '#tmpl'     })     // 創建 Vue 實例，得到 ViewModel     var vm = new Vue({       el: '#app',       data: {},       methods: {}     });     var vm2 = new Vue({       el: '#app2',       data: {},       methods: {},       filters: {},       directives: {},       components: { // 定義實例內部私有組件的         login: {           template: '#tmpl2'         }       },     })   </script>

【