Vue – Vue.component 組件教學 – 使用 v-bind、v-for、x-template

2017-06-04 / JSN / 4 Comments / 8,616 次瀏覽

剛學到 Vue.component 這部分的參數傳遞，覺得繞來繞去真的不是很好理解。重複寫了約 5 次左右才弄清楚一些步驟與參數的關係。下面就依照建立的順序來解說。

官方教學點我。

影片教學

1. 先建構 HTML 框架

<ol> 底下將會是放置我們需要循環的列表

<div class="app">
	<ol><ol>
</div>

2. 設定好 Vue 與即將輸入的 JSON 資料

data 中放置自訂參數 cart，內容需要 JSON 數據

var app = new Vue({
	el: '.app', // 綁定的元素
	data: { // 自訂資料
		cart: [ //我們有一台購物車，裡面有這些商品
			{title: 'Coffee'},
			{title: 'Apple'},
		]
	}
})

3. 擺放準備讓資料循環的的模板位置

我們看增加的這行。這裡開始的數據傳遞一開始比較不好理解，我在底部有附圖可以參考

• 我自訂組件名稱為 c-cart (component-cart 簡寫)，標籤寫法就寫成 <c-cart> 即可。注意，不可與 HTML 標籤相同，例如取名 <menu> <header> … 否則無法作用。
• v-for 的屬性也就是 for loop 的意思。val 從 cart 中逐一取出
• v-bind 綁定的接口名稱，我們自訂名稱為 item
• 接口 item 代入的值為 val，這個 val 由 cart 取出

<div class="app">
	<ol>
		<!-- 增加這行 -->
		<c-cart v-bind:item="val" v-for="val in cart"></c-cart>
	</ol>
</div>

4. 製作組件，並將組建位置放在 new Vue 初始之前。

• c-cart 也就是對應 <c-cart>
• 接口承接的名稱 ‘item’，將被模板當成物件

Vue.component('c-cart', { //填入我們上面自訂組件的名稱
	props: ['item'], //填上上面取名的接口名稱
	template: '<li>{{item.title}}</li>'
})

var = app = new Vue({ ... })

5. 完成

Vue.component('c-cart', {
	props: ['item'],
	template: '<li>{{item.title}}</li>'
})

var app = new Vue({
	el: '.app', 
	data: {
		cart: [
			{title: 'Coffee'},
			{title: 'Apple'},
		]
	}
})

<div class="app">
	<ol>
		<c-cart v-bind:item="val" v-for="val in cart"></c-cart>
	</ol>
</div>

6. 關係圖

我將上方的建立步驟，分成 1 ~ 3 並搭配箭頭，應該就好懂多了。

模版也改使用 text/x-template

如果不要將模版寫在 Vue 內部的話，可以參考。

1. 將模版用 <script type=”text/x-template”> 包圍後，增加 ID
2. component 的部分，將參數 template 指定為 ID

<script type="text/x-template" id="c-cart">
    <li>{{ item.title }}</li>
</script>

Vue.component('c-cart', {
	...
	template: '#c-cart'
})

<script type=”text/x-template”> 我自己測試，也可以使用 <template> 包圍。最後程式碼就變成

<script type="text/x-template" id="c-cart">
    <li>{{ item.title }}</li>
</script>

<div class="app">
    <ol>
        <c-cart v-bind:item="val" v-for="val in cart"></c-cart>
    </ol>
</div>

Vue.component('c-cart', {
	props: ['item'],
	template: '#c-cart'
})

var app = new Vue({
	el: '.app', 
	data: {
		cart: [
			{title: 'Coffee'},
			{title: 'Apple'},
		]
	}
})