Vue元件--引用模板
阿新 • • 發佈:2018-11-01
如果說元件的template內容結構比較簡單,可以直接寫在template選項中;但是當自定義元件的template內容比較複雜的時候,直接寫就不合適了,也容易出錯,所以:
對於這種狀況Vue給出了自己的解決方案:使用模板,使用Vue的內建template模板來包裹著模板內容
這個模板要寫在Vue例項的外面,這裡template的id屬性的值是自定義的,配合js部分用來標識模板內容;但是有一點值得注意, 那就是被template包裹著的內容有且只有一個根元素,在這裡是ul元素<template id="foreignerName"> <!-- <template/>標籤內部被包裹著的內容必須有且只有一個根元素,在這裡的根元素是ul --> <ul> <li v-for="item in nameArr">{{item}}</li> </ul> </template>
JS部分
HTML部分Vue.component("my-haha",{//如果template模板內容比較複雜,那麼就可以這樣做 template:"#foreignerName",//對應於template中的id屬性 data:function(){ return { nameArr:["Alice","Marry","Athena"] } } })
<div id="container" v-cloak>
<h3>{{name}}</h3>
<my-comp></my-comp>
<!-- 當自定義元件的template模板內容比較複雜的時候 -->
<my-haha></my-haha>
</div>