内联模板属性

重大变更

概述

对 inline-template 特性 的支持已被移除。

2.x 语法

在 2.x 中，Vue 在子组件上提供了 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>

3.x 语法

此特性将不再受支持。

迁移策略

大多数 inline-template 的用例假设没有构建工具的设置，其中所有模板都直接写入 HTML 页面中。

迁移构建标志：COMPILER_INLINE_TEMPLATE

选项 #1：使用 <script> 标签

在这种情况下，最直接的解决方法是使用带有备用类型的 <script>

<script type="text/html" id="my-comp-template">
  <div>{{ hello }}</div>
</script>

在组件中，使用选择器定位模板

const MyComp = {
  template: '#my-comp-template'
  // ...
}

这不需要任何构建设置，在所有浏览器中都能正常工作，不受任何 DOM 内 HTML 解析注意事项的影响（例如，您可以使用驼峰式 prop 名称），并在大多数 IDE 中提供适当的语法高亮显示。在传统的服务器端框架中，这些模板可以拆分为服务器端模板片段（包含在主 HTML 模板中），以提高可维护性。

选项 #2：默认插槽

以前使用 inline-template 的组件也可以使用默认插槽进行重构 - 这使数据作用域更加明确，同时保留了内联编写子内容的便利性

<!-- 2.x Syntax -->
<my-comp inline-template :msg="parentMsg">
  {{ msg }} {{ childState }}
</my-comp>

<!-- Default Slot Version -->
<my-comp v-slot="{ childState }">
  {{ parentMsg }} {{ childState }}
</my-comp>

子组件，而不是提供没有模板，现在应该渲染默认插槽*

<!--
  in child template, render default slot while passing
  in necessary private state of child.
-->
<template>
  <slot :childState="childState" />
</template>

• 注意：在 3.x 中，插槽可以作为根使用原生 片段 支持渲染！