Vue2.0的字符串模板、html模板、组件、slot

Posted 2023-04-09

参考技术A

首先，Vue 会将 template 中的内容插到 DOM 中，以方便解析标签。由于 html 标签不区分大小写，所以在生成的标签名都会转换为小写。例如，当你的 template 为 <MyComponent></MyComponent> 时，插入 DOM 后会被转换为 <mycomponent></mycomponent>。

然后，通过标签名寻找对应的自定义组件。 匹配的优先顺序从高到低为：原标签名、camelCase化的标签名、PascalCase化的标签名。 例如 <my-component> 会依次匹配 my-component、myComponent、MyComponent。

注意的地方：
1.全局注册 VS 局部注册

3.注意：

4.组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。父组件的数据需要通过 prop 才能下发到子组件中。

5.Vue的组件里面也可以有data、template、methods、watch等属性，需要注意的是component中的data必须为一个函数参考Vue官网例子：

6.组件之双向绑定：.sync 修饰符

Vue 组件的 API 来自三部分——prop、事件和插槽：

Prop 允许外部环境传递数据给组件；

事件允许从组件内触发外部环境的副作用；

插槽允许外部环境将额外的内容组合在组件中。
7.关于slot（插槽）：

如何将外部 HTML 模板动态导入和解析到 Vue 组件中？

【中文标题】如何将外部 HTML 模板动态导入和解析到 Vue 组件中？

【英文标题】：How do you dynamically import & parse an external HTML template into a Vue component?

【发布时间】：2021-08-19 11:54:59

【问题描述】：

TL;DR：

将骨干网/jquery 应用程序转换为 Vue 3。拥有超过 400 个用于不同视图的 html 模板文件。希望能够以原始格式动态解析这些 html 模板，而无需进行大量重写。还希望能够在 html 中添加对 Vue 组件的模板引用并让 Vue 解析。

原始问题

如何在 Vue 组件中定义外部或动态 HTML 模板（如 MyVueTemplate.html）？ 类似（伪代码）：

export default 
    name: "MyComponent",
    template: import(`@/views/$this.html_id.html`),
    props: 
        html_id: String,
    ,
    components: 
    
;

一旦成功，我需要能够让 temp.html 包含 Vue 组件的标签，例如 <MyOtherViewComponent variable1="test"></MyOtherViewComponent>，然后由 Vue 解析。

我希望 webpack import() 语句的使用方式与我们当前导入 html 模板的方式相同，但也可以在构建期间解析 Vue 组件引用。但如果需要，运行时编译也可能是一个（不太受欢迎的）选项。

有超过 400 个 html 文件，因此目前手动将它们全部重构为 Vue 组件是不可行的，因此这种方法。使用 Vue 3，但即使是 Vue 2 的解决方案也可以作为更多研究的起点。

希望有人对这个问题有所了解。

---

更新

到目前为止，在旧 html 中包含 Vue 组件的唯一方法似乎是在 html 中包含标签，并使用 createApp().mount() 为每个组件创建单独的 Vue 实例.不理想，但可能是唯一的方法。

【问题讨论】：

我做了一些搜索......也许你可以在这里找到一些想法：medium.com/scrumpy/…

@redfox05 你能和v-html一起工作吗？

@PeterKrebs 谢谢，但遗憾的是我已经尝试过了，它适用于动态加载的组件，但我需要源文件是纯 html 的东西，因为这是我们 400 多个模板的格式:( wittgenstein谢谢，但遗憾的是 v-html 在这里不起作用。"Note that the contents are inserted as plain HTML - they will not be compiled as Vue templates."

【参考方案1】：

您需要 runtime template compiler - 否则，如果您的模板是 Vue 组件，那么您可以按照 https://markus.oberlehner.net/blog/distributed-vue-applications-loading-components-via-http/ 中的说明通过 HTTP 加载它们

【讨论】：

运行时并不理想，希望它可以类似于 webpack 如何通过动态导入进行延迟加载，但仍然在构建期间离线编译。但是感谢您在运行时的输入。

我不得不承认我很困惑 - 首先你说你不想想将这些编译为 Vue 组件，现在你说你希望 Webpack 以某种方式 @987654323 @ 他们。这就是 Angular 的工作方式——它在运行时获取 HTML 模板，但这不是 Vue 的工作方式。所以恐怕你将不得不寻找不同的方式来实现你的目标。

按定义模板（不仅仅是 vue 模板）需要编译 - 无论是运行时还是构建时，编译只是识别模板的“动态”部分以便可以呈现它的过程。很多框架不叫它编译，但这只是一个命名的东西。如果您希望在构建时处理您的 html，但在运行时延迟加载，您需要将它们转换为单个文件组件，然后将它们定义为异步组件。 Wepack 将像处理动态导入一样处理这些问题

@IVOGELOV 我完全理解它很难理解，也很难解释。 Webpack 的 import() 函数将所需文件捆绑到代码中，然后在运行时动态获取。但是，它不会解析 Vue 模板代码的 html，这就是我想要的。我会用 TL 更新问题；DR 看看是否有帮助。

@Xinchao 是的，你已经说了很多我想要实现的目标，这很难解释。很高兴模板在构建期间被编译，并且只是在运行时延迟加载，因为它们无论如何都是静态的。但是可以使用 .html 格式的文件来完成，因为将它们全部（400+）转换为 vue 文件是不可行的。 JS 也是完全分离的。