如果子組件有inline-template特性,組件將把它的內容當做模板,而不是把它當做分發內容,這樣模板更靈活。
<my-component inline-template>
<div>
<p>These are compiled as the component's own template.</p>
<p>Not parent's transclusion content.</p>
</div>
</my-component>
但是,inline-template讓模板的作用域難以理解,最佳實踐是使用template選項在組件內定義模板或者在.vue文件中使用template元素。
X-templates
另一種定義模版的方式是在 JavaScript 標簽里使用
text/x-template
類型,並且指定一個 id。例如:
<script type="text/x-template" id="hello-world-template">
<p>Hello hello hello</p>
</script>
Vue.component(
'hello-world', {
template: '#hello-world-template'
})
這在有很多模版或者小的應用中有用,否則應該避免使用,因為它將模版和組件的其他定義隔離了。
對低開銷的靜態組件使用v-once
盡管在vue中渲染html非常快很快,不過當組件中包含大量靜態內容時,可以考慮使用v-once,將渲染結果緩存起來,就像:
Vue.component(
'terms-of-service', {
template: '\
<div v-once>\
<h1>Terms of Service</h1>\
... a lot of static content ...\
</div>\
'
})