Vue.js x-Template 使用方法（傳遞參數版）
【拜託！一模一樣的程式碼出現好幾遍，真的害人又害已好嗎，該是使用Template的時候了】
前言
- 由於網路上的介紹資料相對單純一些，新手較容易入門..我只是針對傳入Object做簡單的註解
基本介紹
開發環境
- Microsoft Visual Studio .NET 2017 Professional
- Vue.js 2.x
參考資料
取得方式
HTML (套用x-Tempalte之前)
由於我們在呈現的時候，會做一個收納，以避免一次就把所有資料全部展示出來，造成畫面過長...
所以我們把同樣的程式碼，切成兩塊，再用v-if做資料呈現的控制...
<div id="deptinfo">
<ul>
<%-- 前3個部門資訊 --%>
<li v-for="(Dept,index) in GroupData.Dept" :key="index" v-if="index < 3">
<%--部門清單VUE START--%>
<div>
<%--部門資訊--%>
<div>
<p v-text="Dept.id"><%--部門代號--%></p>
<p v-text="Dept.name"><%--部門名稱--%></p>
<p v-text="Dept.manager"><%--部門主管--%></p>
</div>
<%--部門人員資訊--%>
<div v-for="(emp, index2) in Dept.emp" :index="index2">
<div>
<p v-text="emp.id"><%--人員工號--%></p>
<p v-text="emp.name"><%--人員姓名--%></p>
<p v-text="emp.lv"><%--人員職等--%></p>
</div>
</div>
</div>
<%--部門清單VUE END --%>
</li>
<div class="click-show"><!-- 點選後才展開 -->
還有 <span v-text="GroupData.Dept.length - 3"></span> 個部門
</div>
<div>
<%-- 第4個之後的部門資訊放這裡 --%>
<li v-for="(Dept,index) in GroupData.Dept" :key="index" v-if="index >= 3">
<%--部門清單VUE START--%>
<div>
<%--部門資訊--%>
<div>
<p v-text="Dept.id"><%--部門代號--%></p>
<p v-text="Dept.name"><%--部門名稱--%></p>
<p v-text="Dept.manager"><%--部門主管--%></p>
</div>
<%--部門人員資訊--%>
<div v-for="(emp, index2) in Dept.emp" :index="index2">
<div>
<p v-text="emp.id"><%--人員工號--%></p>
<p v-text="emp.name"><%--人員姓名--%></p>
<p v-text="emp.lv"><%--人員職等--%></p>
</div>
</div>
</div>
<%--部門清單VUE END --%>
</li>
</div>
</ul>
</div>
從上面可以發現到 部門清單VUE 的部份是重覆的，只是為了顯示而把它切開，
若是這個區塊發展得很大，或是邏輯複雜一點，就會造成後續維護上的困擾，
這時候就可以使用x-Template的方式處理。
X-Template 套用方法
HTML
這邊有兩個地方要注意：
- 帶過去的props名稱最好是小寫
- 要帶過去的所有props都得寫在裡面
- is裡面填的不是Template的名稱，而是在VueComponent註冊的名稱
<div id="deptinfo">
<ul>
<%-- 前3個部門資訊 --%>
<li is="xTemplateDept" v-for="(Dept,index) in GroupData.Dept" :depts="Dept" :index="index" :key="index" v-if="index < 3"></li>
<div class="click-show"><!-- 點選後才展開 -->
還有 <span v-text="GroupData.Dept.length - 3"></span> 個部門
</div>
<div>
<%-- 第4個之後的部門資訊放這裡 --%>
<li is="xTemplateDept" v-for="(Dept,index) in GroupData.Dept" :depts="Dept" :index="index" :key="index" v-if="index >= 3"></li>
</div>
</ul>
</div>
Template
實作方式有好幾種，如下：
- 直接寫在Component裡，變成一串String。
（如果內容很多的話，不好維護） - 寫在<script type="text/x-template" id="xDeptList"></script>裡面
（維護的問題解決了，但VS.NET怎麼沒有提供顏色的標註啊？？） - 寫在<template id="xDeptList></template>裡面
由於…對於一個懶惰的程序猿來說
沒有顏色跟沒有對齊都是一件令人抓狂的事
所以…
<template id="xDeptList">
<li>
<%--部門清單VUE START--%>
<div>
<%--部門資訊--%>
<div>
<p v-text="depts.id"><%--部門代號--%></p>
<p v-text="depts.name"><%--部門名稱--%></p>
<p v-text="depts.manager"><%--部門主管--%></p>
</div>
<%--部門人員--%>
<div v-for="(emp, index2) in depts.emp" :index="index2">
<div>
<p v-text="emp.id"><%--人員工號--%></p>
<p v-text="emp.name"><%--人員姓名--%></p>
<p v-text="emp.lv"><%--人員職等--%></p>
</div>
</div>
</div>
<%--部門清單VUE END --%>
</li>
</template>
JavaScript
- 參數(props)建議帶入資料型態
- 若有呼叫原本的function，記得加上對應的function（其實我只是懶得搬程式!!!!!!）
- data記得加return
- 如果怎麼樣都不會運作，請注意props、methods，有沒有加上s
<script type="text/javascript">
<%--xTemplate必須註冊在Vue.component底下，也得在最前面--%>
Vue.component('xTemplateDept', {
props: {
index: Number
, depts: Object
}, <%--使用 prop 傳遞資料(要傳入template內的的參數)--%>
template: '#xDeptList', <%--綁定x-template的id--%>
methods: {
setDeptManger: function (index, empid) {
vm.setDeptManger(index, empid);
},
setDeptEmp: function (index, empid) {
vm.setDeptEmp(index, empid);
}
}
});
let vm = new Vue({
el: '#deptinfo',
data: function () {
return {
GroupData: [], <%--各處級相關資料--%>
}
},
methods: {
getdata : function () {
//getdata
},
setDeptManger: function (index, empid) {
//setDeptManger
},
setDeptEmp: function (index, empid) {
//setDeptEmp
}
}
});
</script>
Written By Felix Hsieh