我最近发布了 v-runtime-template,一个Vue组件,可以通过使用类似于v-html的API在运行时轻松编译和解释Vue.js模板。
我在一个项目中遇到了一个问题,我必须从服务器接收一个模板。为什么你说?好吧,想象一下通常的拖放界面,允许用户构建某种界面。
你可能已经做过简单的HTML使用v-html。让我们看看一个例子,以便更容易理解。
使用 v-html 注入简单的 HTML
使用v-html,您可以将HTML注入到任何DOM元素中:
1<template>
2 <div>
3 <div v-html="template"></div>
4 </div>
5</template>
6
7<script>
8export default {
9 data: () => ({
10 template: `
11 <h2>Howdy Yo!</h2>
12 <a href="croco-fantasy">Go to the croco-fantasy</a>
13 `
14 }),
15};
16</script>
模板字符串可以完全来自服务器Ajax调用,问题是,如果我们希望模板有Vue模板代码呢?
1export default {
2 data: () => ({
3 template: `
4 <app-title>Howdy Yo!</app-title>
5 <vue-router to="/croco-fantasy">Go to the croco-fantasy</vue-router>
6 `
7 }),
8};
v-html将该模板解释为简单的HTML,而这些标签在HTML中并不存在。
输入 v-runtime-template
这就是v-runtime-template进入游戏的地方,它提供了类似于v-html的API,但它确实解释了特定的Vue模板代码。
’v-runtime-template’ 会自动获取使用的母组件的背景,然后使用动态组件来让 Vue 编译和粘贴,如您在 代码的渲染函数中所看到的。
要使以前的代码工作,您只需要使用‘v-runtime-template’通过模板支持,如下:
1<template>
2 <div>
3 <v-runtime-template :template="template"/>
4 </div>
5</template>
6
7<script>
8import VRuntimeTemplate from "v-runtime-template";
9
10export default {
11 data: () => ({
12 template: `
13 <app-title>Howdy Yo!</app-title>
14 <vue-router to="/croco-fantasy">Go to the croco-fantasy</vue-router>
15 `
16 }),
17};
18</script>
请记住,当您使用v-runtime-template时,您仍然具有相同的规则,就像您将该模板作为您的组件的一部分一样。
1import VRuntimeTemplate from "v-runtime-template";
2import AppTitle from "./AppTitle";
3
4export default {
5 data: () => ({
6 template: `
7 Howdy Yo!
8 Go to the croco-fantasy
9 `
10 }),
11 components: {
12 AppTitle
13 }
14};
访问家长范围
关于v-runtime 模板的一件好事是,它可以访问父母的范围,这意味着通过其数据,附件,计算或方法可以访问任何内容。
例如,下面的模板可以访问动物:
1export default {
2 data: () => ({
3 animal: "Crocodile",
4 template: `
5 <app-title>Howdy {{animal}}!</app-title>
6 `
7 })
8 // ...
或者叫一个方法:
1export default {
2 data: () => ({
3 animal: "Crocodile",
4 template: `
5 <app-title>Howdy {{animal}}!</app-title>
6 <button @click="goToCrocoland">Go to crocoland</button>
7 `
8 }),
9 methods: {
10 goToCrocoland() {
11 // ...
12 }
13 }
14 // ...
您的字符串或服务器模板从未与您的应用程序更加连接过!
包装上
v-runtime-template是为了使用一个类似v-html的语法,轻松地解决在飞机上解释模板的问题,例如来自服务器的模板;它们在运行时被接收。
保持冷静