编辑“︁Vue.js内联模板”︁

{{DISPLAYTITLE:Vue.js内联模板}}  
'''Vue.js内联模板'''是Vue组件中一种特殊的模板定义方式，允许开发者直接在父组件的模板中编写子组件的模板内容，而非在子组件内部通过`<template>`标签定义。这种方式为动态模板注入和快速原型设计提供了灵活性，但也需谨慎使用以避免维护性问题。  

== 基本概念 ==  
在标准Vue组件中，模板通常定义在子组件的`<template>`标签或单文件组件（`.vue`文件）中。而'''内联模板'''通过父组件的`inline-template`特性，将模板内容直接嵌入子组件的标签内。  

=== 语法示例 ===  
<syntaxhighlight lang="html">  
<!-- 父组件模板 -->  
<div id="app">  
  <child-component inline-template>  
    <div>  
      <p>这是内联模板的内容</p>  
      <p>子组件数据：{{ childData }}</p>  
    </div>  
  </child-component>  
</div>  

<script>  
Vue.component('child-component', {  
  data() {  
    return { childData: '来自子组件' };  
  }  
});  

new Vue({ el: '#app' });  
</script>  
</syntaxhighlight>  

'''输出结果'''：  
<div>  
  <p>这是内联模板的内容</p>  
  <p>子组件数据：来自子组件</p>  
</div>  

=== 关键特性 ===  
* '''作用域'''：内联模板中的表达式访问子组件的数据/方法，而非父组件。  
* '''优先级'''：若子组件已有模板，内联模板会覆盖它。  
* '''限制'''：不支持编译作用域插槽（`scoped slots`）。  

== 实际应用场景 ==  
=== 动态内容注入 ===  
当需要根据父组件的状态动态生成子组件模板时，内联模板可避免复杂的插槽逻辑。  

<syntaxhighlight lang="html">  
<!-- 父组件动态控制子组件模板 -->  
<div id="dynamic-app">  
  <button @click="useCustomTemplate = !useCustomTemplate">切换模板</button>  
  <dynamic-child inline-template>  
    <div v-if="useCustomTemplate">  
      自定义模板：{{ dynamicData }}  
    </div>  
    <div v-else>  
      默认模板：{{ dynamicData }}  
    </div>  
  </dynamic-child>  
</div>  

<script>  
Vue.component('dynamic-child', {  
  data() { return { dynamicData: '动态数据' }; }  
});  

new Vue({  
  el: '#dynamic-app',  
  data: { useCustomTemplate: false }  
});  
</script>  
</syntaxhighlight>  

=== 快速原型设计 ===  
在开发早期阶段，内联模板允许直接在父组件中调整子组件UI，无需频繁修改子组件文件。  

== 注意事项 ==  
* '''维护性'''：内联模板可能使父子组件耦合度增加，建议仅在简单场景使用。  
* '''工具链支持'''：部分构建工具（如Vue CLI）可能需要额外配置才能解析内联模板。  
* '''性能'''：运行时编译内联模板比预编译模板稍慢。  

== 与其他特性的对比 ==  
{| class="wikitable"  
|+ 内联模板 vs 插槽 vs 渲染函数  
|-  
! 特性 !! 作用域 !! 灵活性 !! 适用场景  
|-  
| 内联模板 || 子组件 || 中等 || 快速原型、简单动态模板  
|-  
| 插槽 || 父组件/子组件 || 高 || 内容分发、复用布局  
|-  
| 渲染函数 || JavaScript逻辑 || 最高 || 复杂动态UI  
|}  

== 高级用法：结合作用域插槽 ==  
虽然内联模板不支持作用域插槽，但可通过组合方式实现类似功能：  

<syntaxhighlight lang="html">  
<!-- 父组件 -->  
<div id="advanced-app">  
  <scoped-child v-slot="{ slotData }">  
    <template #default>  
      <div inline-template>  
        结合插槽的内容：{{ slotData }} + {{ childProp }}  
      </div>  
    </template>  
  </scoped-child>  
</div>  

<script>  
Vue.component('scoped-child', {  
  template: `  
    <div>  
      <slot :slotData="'插槽数据'"></slot>  
    </div>  
  `,  
  data() { return { childProp: '子组件属性' }; }  
});  
</script>  
</syntaxhighlight>  

== 总结 ==  
内联模板是Vue.js中一项'''利基特性'''（Niche Feature），适用于特定场景：  
* 需要父组件直接控制子组件结构的简单用例。  
* 开发原型时快速迭代UI。  
* 与旧版代码库集成时临时解决方案。  

对于复杂应用，建议优先使用'''插槽'''或'''渲染函数'''以保持代码可维护性。

[[Category:前端框架]]
[[Category:Vue.js]]
[[Category:Vue.js深入组件]]