055_末晨曦Vue技术_处理边界情况之内联模板-CSDN博客

本文链接：https://blog.csdn.net/LS_952754/article/details/126460667

本文详细解读了Vue中inline-template的使用方式，它如何影响组件模板结构，并介绍了最佳实践。通过实例演示了如何在组件内定义和使用内联模板，以及注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

内联模板

当 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>