目录
- 出错现象
- 出错原因
- Vue的构建版本
- 解决方案
- M1：将运行时版换成完整版本
- M2：直接使用render函数渲染
出错现象
这个报错是我在vue-cli项目中写vue组件用到template属性并测试的时候报出来的问题。
-
报错信息
出错原因
关于Vue构建版本的问题，因为template属性不能在运行时版本中使用。
Vue的构建版本
- 运行时版：不支持
template模板，需要打包的时候提前编译，把模板转换成render函数。vue-cli默认使用次版本，因为其效率高。 - 完整版本：包含运行时和编译器，体积比运行时版本大
10K左右，编译器的作用程序运行的时候把模板转换成render函数，性能比运行时差。
解决方案
- 第一种方法：将运行时版换成完整版本，不过会增加
10k的体积 - 第二种方法：不用
template模板，使用render函数渲染
M1：将运行时版换成完整版本
去 vue-cli官方文档 -> Config Reference -> runtimecompiler 参考
- 创建
vue.config.js文件，runtimeCompiler默认是false，改为true就是完整版本
// vue.config.js
module.exports = {
runtimeCompiler: true
}
M2：直接使用render函数渲染
原代码
Vue.component('router-link', {
props: {
to: String
},
template: '<a :href="to"><slot></slot></a>'
})
修改后代码
Vue.component('router-link', {
props: {
to: String
},
// template: '<a :href="to"><slot></slot></a>'
// h函数的作用是帮我们创建虚拟DOM，render函数调用h函数并把结果返回
render (h) {
// h函数可以接收三个参数
// 第一个参数：创建元素对应选择器，可以使用标签选择器,a
// 第二个参数：可以给选择器添加一些属性，
// 第三个参数：是生成元素的子元素，数组形式，当前a标签的内部结构是slot，需要通过代码的形式获取slot，这个slot没有命名所以是默认的
return h('a', {
// DOM对象的属性在attr中写
attrs: {
href: this.to
}
}, [
// 获取默认插槽
this.$slots.default
])
}
})
it works~
