<html> <head> <title>vue創建組件</title> <meta charset="utf-8"> </head> <body> <div id="app"> <my-com1></my-com1> <my-com2></my-com2> <my-com3></my-com3> </div> <div id="app2"> <private></private> </div> <template id="temp1"> <div> <h3>這是通過template元素在外部定義的組件結構</h3> </div> </template> <template id="temp2"> <div> <h3>這是一個私有組件</h3> </div> </template> </body> <!-- 這里請引入cdn或者是下載到本地的vue.js --> <script src="node_modules\vue\dist\vue.js"></script> <script> //ps:組件模板只能有一個根元素 //一、創建全局的組件 //方式1 使用中間變量 //1.1使用extend創建 var com1 = Vue.extend({ template:'<h3>這是使用Vue.extend創建的組件</h3>' }) //1.2使用Vue.component(),定義組件的名稱 Vue.component('myCom1',com1);//使用駝峰命名是則在引用時就需將大寫的字符變為小寫，並以-連接兩個單詞，不使用則引用時標簽名與定義一致 //方式2 不使用中間變量 Vue.component('myCom2',Vue.extend({ template:'<h3>這是使用Vue.component創建的組件</h3>' })) //更簡潔的方式 Vue.component('mycom2',{ template:'<h3>這是使用Vue.extend創建的組件</h3>' }) // 方式3 通過在template元素，在被控制的#app外面定義組件的模板 Vue.component('myCom3',{ template:'#temp1' }) let vm = new Vue({ el: "#app", data:{ } }); //二、創建私有組件 let vm2 = new Vue({ el: "#app2", data:{ }, components:{ private:{ template:"#temp2" } } }); </script> </html>
效果：
