Vue 中可以定义组件模版的几种方式
前置知识回顾
new Vue({...options})一些基本知识
new Vue(options)
的选项中,也可以拥有 data、methods、components、生命周期函数等等,和组件实例的 options 一样。如下例子
<div id="app">
{{uname}}
<hello-word></hello-word>
</div>
<script>
Vue.component("HelloWord", {
data() {
return {
msg: "你好,世界!",
};
},
template: "<div>HelloWord组件-{{msg}}</div>",
});
var app = new Vue({
el: "#app",
data() {
return {
uname: "小红",
};
},
});
</script>
根实例的 template、render 不是必须的,如上例子就是.
它们的作用是接受一个根组件,然后将其编译后的内容填充到 el 内.
通过 template、render 引入一个根组件,从而组成一个由上至下的组件树结构
一般情况下,我们不在根实例中定义普通选项,根实例中常用的配置项有:
{
el: "#app",
router,
store,
render:h=>h(App)
}
之所以说这些,是因为我下边的例子中,根实例有的没有用到 template、render
下边我们举例说一下vue都有哪些模板技术
方式 1: 模板-vue 单文件
使用构建工具 cli 创建项目,综合来看单文件组件应该是最好的定义组件的方式,而且不会带来额外的模版语法的学习成本。
如下,就一个完整的组件,使用的地方直接导入即可
import MyHeader from './my-header.vue'
<template>
<h1>{{title}}</h1>
</template>
<script>
// ./my-header.vue
export default {
name: "MyHeader",
props: {
title: "",
},
};
</script>
方式 2: 模板-template
Vue 最简单直接的一种定义组件模版的方式,但是方式写起来很不友好,就像我们以前拼接 HTML 元素是一样的,很痛苦,所以我们并不常用
字符串模板,template 选项对象的属性,模板将会替换挂载的元素,挂载元素的内容都将被忽略
<div id="app">
<my-header title="xx列表"></my-header>
</div>
<script>
var MyHeader = {
props: {
title: "",
},
// 此处也可以使用es6的字符串模板能力
template: "<h1>{{title}}</h1>",
};
var app = new Vue({
el: "#app",
components: { MyHeader },
});
</script>
回忆过去
需要注意是的是,大概 2018 年的时候,脚手架创建的项目
vue 实例都是使 template 属性来指定根组件
不过现在都被 render 函数写法代替了
const app = new Vue({
el: "#app",
components: { App },
template: "<App/>",
});
const app = new Vue({
render: (h) => h(App),
}).$mount("#app");
展望未来
X-Template,本质上讲,它仍是字符串模板 template 技术,是属于字符串模板的辅助性技术
定义一个 <script>
标签,标记 text/x-template
类型,通过 id 链接
这个跟腾讯的artTemplate
很像
<div id="app">
<my-header title="xx列表"></my-header>
</div>
<script type="text/x-template" id="my-header-xt">
<h1>{{this.title}}</h1>
</script>
<script>
Vue.component("MyHeader", {
props: {
title: "",
},
template: "#my-header-xt",
});
var app = new Vue({
el: "#app",
});
</script>
方式 3: 模板-内联模板
与 「X-template」模版定义方式被称为模版定义的替代品,把内容定义在组件标签元素的内部,而不是作为 slot 内容分发,方式比较灵活,但是给让我们组件的模版与其他属性分离开。
<div id="app">
<my-template inline-template>
<div>
<!-- 🚀只能有一个根元素 -->
<div>{{uname}}</div>
<!-- ❌❌ 无法使用父组件data -->
<div>{{msg}}</div>
</div>
</my-template>
</div>
<script>
Vue.component("MyTemplate", {
data() {
return {
msg: "在子组件中声明的数据",
};
},
});
var app = new Vue({
el: "#app",
data() {
return {
uname: "小红",
};
},
});
</script>
方式 4: 模板-render 函数
单文件组件底层内部最终也是会被编译成 render 函数形式
render 函数将会替换挂载的元素,挂载元素的内容都将被忽略
模板-template
的代替方案
Vue.component("MyHeader", {
props: {
title: "",
},
render(createElement) {
// 此处可以替换为jsx,会更加简介
return createElement("h1", this.title);
},
});
var app = new Vue({
el: "#app",
});
以上就是 Vue 中可以定义组件模版的几种方式,有人可能说,我特么要知道这么多干嘛,只要一种不就行了,我想说兄 die 多知道几种可以帮助我们在不同的条件下做出更好的选择。
比如:你就需要开发一个简单的页面,你非要弄个单文件组件,脚手架跑起来,何必呢,你说对不。
解析 DOM 模板时的注意事项
有些 HTML 元素,诸如 <ul>
、<ol>
、<table>
和 <select>
,对于哪些元素可以出现在其内部是有严格限制的。而有些元素,诸如 <li>
、<tr>
和 <option>
,只能出现在其它某些特定的元素内部。
这会导致我们使用这些有约束条件的元素时遇到一些问题。例如:
<table>
<blog-post-row></blog-post-row>
</table>
这个自定义组件 <blog-post-row>
会被作为无效的内容提升到外部,并导致最终渲染结果出错。幸好这个特殊的 is attribute 给了我们一个变通的办法:
<table>
<tr is="blog-post-row"></tr>
</table>
需要注意的是如果我们从以下来源使用模板的话,这条限制是不存在的:
- 字符串模板 (例如:template: '...')
- 单文件组件 (.vue)
- 模板定义的替代品之 X-Template
解读官方文档的描述,意思是说,普通这种写法(我把它称之为html模板
)是不行的
<div id="app">
<select>
<my-option></my-option>
</select>
</div>
<script>
Vue.component("MyOption", {
template: "<option>选项一</option>",
});
var app = new Vue({
el: "#app",
});
</script>
使用字符串模板(模板-template)来使用组件,是可以的
<div id="app"></div>
<script>
Vue.component("MyOption", {
template: "<option>选项一</option>"
});
var app = new Vue({
el: "#app",
// 在模板-template使用也没问题
template: `<select>
<my-option></my-option>
</select>`
});
</script>
单文件组件 (.vue),是可以的
<template>
<div id="app">
<select>
<!-- 在单文件模板里这么用没问题 -->
<my-option></my-option>
</select>
</div>
</template>
<script>
import MyOption from './my-option.vue'
export default {
name: 'App',
components: { MyOption },
}
</script>
在x-template中,是可以的
<div id="app"></div>
<script type="text/x-template" id="my-app-xt">
<select>
<!-- 在x-template使用没问题 -->
<my-option></my-option>
</select>
</script>
<script>
Vue.component("MyOption", {
template: `
<option>选项一</option>
</select>`,
});
var app = new Vue({
el: "#app",
template: "#my-app-xt",
});
</script>
但是以上所有,只要is属性,就都可以解决该问题。