创新互联VUE3教程：Vue3.0内联模板Attribute

#概览

对内联特性的支持已被移除。

#2.x 语法

在 2.x 中，Vue 为子组件提供了 inline-template attribute，以便将其内部内容用作模板，而不是将其作为分发内容。

  

    
它们被编译为组件自己的模板
    
不是父级所包含的内容。
  

#3.x 语法

将不再支持此功能。

#迁移策略

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

#选项 #1：使用

在组件中，使用选择器将模板作为目标：

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

这不需要任何构建设置，可以在所有浏览器中工作，不受任何 DOM HTML 解析警告的约束 (例如，你可以使用 camelCase prop 名称)，并且在大多数 ide 中提供了正确的语法高亮显示。在传统的服务器端框架中，可以将这些模板拆分为服务器模板部分 (包括在主 HTML 模板中)，以获得更好的可维护性。

#选项 #2：默认 Slot

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

  {{ msg }} {{ childState }}





  {{ parentMsg }} {{ childState }}

子级现在应该渲染默认 slot*，而不是不提供模板：

• 提示：在 3.x，slot 可以渲染为具有原生 fragments 支持的根目录！

本文名称：创新互联VUE3教程：Vue3.0内联模板Attribute
网址分享：http://www.shufengxianlan.com/qtweb/news18/417518.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联