Vue – 如何將參數傳遞到組件 component 內部

2017-06-08 / JSN / 4 Comments / 519 次瀏覽

模板的數據，通常需要由 AJAX 取得，應該怎麼把參數傳遞進去呢？假設 HTML 如下

<div class="app">
	<c-message></c-message>
</div>

接著 Vue 的部分

// 組件
Vue.component('c-message', {

	// 模板文字的 message 物件，會等於下方的 message
	template: '<div>{{ message.title }} </div>',

	// 重要！務必使用 function 而非 {}
	data: function (){

		// 假設透過 AJAX 向伺服器獲取資料
		var ajax_message = {
			title: '點擊次數'
		}

		return {
			message: ajax_message
		}
	}
})

// 初始化
new Vue({
	el: '.app'
})

這裡有一點要注意，AJAX 取得的 “ajax_message” 要放在 component 內的 data: function ()，原因官方有提到，點我參考。

我這邊用影片來介紹為什麼：