inline-template
时间: 2023-09-02 13:12:15 浏览: 23
`inline-template` 是 Vue.js 的一个指令,用于在组件中定义内联模板。通常情况下,我们在组件的 `template` 中定义模板,但有些时候,我们希望在组件的定义中直接使用模板,这时候就可以使用 `inline-template` 指令。
例如:
```html
<template>
<div>
<h1>{{ title }}</h1>
<p>{{ content }}</p>
</div>
</template>
<script>
export default {
name: 'MyComponent',
data() {
return {
title: 'Hello',
content: 'World',
}
},
}
</script>
```
可以简化为:
```html
<script>
export default {
name: 'MyComponent',
data() {
return {
title: 'Hello',
content: 'World',
}
},
inline-template: `
<div>
<h1>{{ title }}</h1>
<p>{{ content }}</p>
</div>
`,
}
</script>
```
注意,在使用 `inline-template` 指令时,模板必须是一个字符串,且不能包含自定义指令等特殊用法。