我與VueJs第8天_組件component的使用_template(dom模板)解析細節

 

在Vue當中我們可以自定義組件(component)

See the Pen by Jacob (@dryjoker) on CodePen.

在當中第一參數為組件要命名為捨麼名稱(會等於之後使用的客製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而言會無法解析

以下是錯誤示範

See the Pen by Jacob (@dryjoker) on CodePen.

原因在於

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的例子

See the Pen by Jacob (@dryjoker) on CodePen.

這裡組件裡面的data

是返回一個臨時建立的物件，當中定義屬性count

每次組件在使用都會生成不同的物件，初始化都統一為0。

這裡若在組件中data定義使用的是一個物件則會有共用跟永遠使用同一物件的錯誤問題