1. 程式人生 > >VUE元件定義的幾種方式

VUE元件定義的幾種方式

(1)                 區域性註冊

var app ={         //app是元件的模板名
   templete:'<div>我是元件的模板,但我不知道我是那個元件的模板,在這裡你可以敲出你想要顯示的內容 例 
               如:HTML程式碼,或者包含 指令 其他元件的一個HTML程式碼片段</div> '
 components:{},  //可加可不加,加了的意思是裡面還有一個子元件(有了子元件,就還得再定義一個模板)	
		 };
			

			
下面為vue的例項化					

  new Vue ({
	  el: "#qwe",          //el  建立和掛載根例項, 這是一個掛載點 此處掛載到qwe上
       data:{},                 //  這裡是你要傳入的資料,即初始資料
 components:{'love':app}, //components意思是元件,這個屬性的作用就是定義元件的名字 此處意思是把app這個元件模板定義元件名為love					   
					   })

 (2)                  全域性註冊

 在這裡的hello之後,{}之內的內容其實就相當於vue的例項化,就跟上面的一樣,只是省略了(說白了就是一個語法糖,在怎麼改變做法,這個糖還是甜的,)

Vue.component('hello',{              //hello是元件名
		    data: function () {return {}},         //這個屬性可加可不加,加了意思就是你可以為你 
                                         這個即下面的模板templete一個初始值,一般用於元件的複用
		   props:[],   //這個屬性可加可不加,加了意思就是你可以通過 Prop 向子元件傳遞資料
		templete:'<div>我是元件的模板,我是hello這個元件的模板,在這裡你可以敲出你想要顯示的內容 例如:HTML程式碼,或者包含 指令 其他元件的一個HTML程式碼片段</div>'
								})