行內模板
點擊打開視頻講解更加詳細
當 inline-template 這個特殊的 attribute 出現在一個子組件上時，這個組件將會使用其里面的內容作為模板，而不是將其作為被分發的內容，這使得模板的撰寫作業更加靈活，
<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>
行內模板需要定義在 Vue 所屬的 DOM 元素內，
注意：不過，inline-template 會讓模板的作用域變得更加難以理解，所以作為最佳實踐，請在組件內優先選擇 template 選項或 .vue 檔案里的一個 <template> 元素來定義模板，
案例：
<template>
<div id="app">
<!-- <HelloWorld></HelloWorld> -->
<!-- 當 inline-template 這個特殊的 attribute 出現在一個子組件上時，這個組件將會使用其里面的內容作為模板，
而不是將其作為被分發的內容 -->
<HelloWorld inline-template>
<div>
我是行內模板
</div>
</HelloWorld>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
data(){
return {
}
},
mounted() {
},
components:{
HelloWorld
},
methods:{
}
}
</script>
<style scoped>
</style>
src\components\HelloWorld.vue
<template>
<div >
子組件
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: [],
data(){
return{
}
},
mounted(){
},
components:{
},
methods:{
}
}
</script>
<style scoped>
</style>
若對您有幫助，請點擊跳轉到B站一鍵三連哦！感謝支持！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/502488.html
標籤：其他