我與VueJs第8天_組件component的使用_template(dom模板)解析細節
在Vue當中我們可以自定義組件(component)
在當中第一參數為組件要命名為捨麼名稱(會等於之後使用的客製tag name)
裡面則是透過template來設定一系列html tag....
其中命名有一些W3C建議的規範
最好是全小寫並使用dash來區隔
此外必須在Vue實體化之前先定義component(必須寫在new Vue({})上面)
若是直接透過Vue.component(....)定義
會被視為Global component
所有不同的Vue實體都能共用
若想定義為Local則能夠定義於特定Vue實體屬性中
除了用Vue.component(....)來做客製化組件之外
也可以先透過
var my_compoent = Vue.extend({
template: '....一些html組合....'
});
在指給Vue.component
例如:
var my_com = Vue.extend({
template:'<h1>這是我透過vue extend產生的global組件</h1>'
});
Vue.component('my-com',my_com);
在做template設計跟使用時會有一些細節要留意
若今天組件想要用select中的自訂option群組
這時會發現捨麼都跑不出來
因為對於html而言他不認識這個自定義組件
它只知道select下面只能存在<option>
此外table當中的<tr> <td>也是一樣你不能自己去定義客製組件包覆在<table>當中
對於特定瀏覽器的html而言會無法解析
原因在於
Vue實體中el有指定該div 為其視覺元素因而導致這種異常
可以在el之後再定義template
告訴瀏覽器我這個id為app的div當中模板
就是要長成這樣，其中還包含我自己定義的組件
See the Pen vue_template_carefull2 by Jacob (@dryjoker) on CodePen.
在設計自己組件時候
無論用extend或者直接Vue.component都一樣
裡面自訂的data屬性必須為function!!
裡面自訂的data屬性必須為function!!
裡面自訂的data屬性必須為function!!
Vue組件的data必須是一個函數
而Vue實體的data是一個物件
在Vue組建中若你覺得template每次都要擠在同一行字串這種寫法
不太好維護
則可以把原本用單引號' 包覆(不能換行)
改為用重音符 ` 包覆(可以換行)
此外組件再呼叫時候也請不要直接用 <my-com /> 這種寫法
(當有兩個以上時候vue會有誤判問題)
建議一律使用成對的begin-tag , close-tag寫法 <my-com></my-com>
這裡示範data必為function的例子
這裡組件裡面的data
是返回一個臨時建立的物件，當中定義屬性count
每次組件在使用都會生成不同的物件，初始化都統一為0。
這裡若在組件中data定義使用的是一個物件則會有共用跟永遠使用同一物件的錯誤問題
留言
張貼留言