內聯模板

點擊打開視頻講解更加詳細

當 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 class="hello">
    子組件
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: [], 
  data(){
    return{
      
    }
  },
  mounted(){
    
  },
  components:{
    
  },
  methods:{
    
  }
}
</script>

<style scoped>

</style>

若對您有幫助，請點擊跳轉到B站一鍵三連哦！感謝支持！