目录

• 出错现象
• 出错原因
  • 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 参考

1. 创建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~