vue使用template,报错的问题

局部注册这个组件:

// 父组件
<div>
  <input type="text" v-model="input" placeholder="please input" />
  <test-child :test="test" />
</div>
  
// 子组件, 通过局部注册方式
components: {
  testChild: {
    template: `<div v-bind="$attrs">hello</div>`,
  }
},

但是testChild组件没有渲染,并报错:

You are using the runtime-only build of Vue where the template compiler is not available.
Either pre-compile the templates into render functions, or use the compiler-included build.

看到这篇:https://www.jianshu.com/p/c35c2c178fe5 以及You are using the runtime-only build

vue有两种形式的代码
分别是compiler(模板)模式和runtime模式(运行时)
vue模块的package.json的main字段默认为runtime模式,指向了"dist/vue.runtime.common.js"位置

我们的文件中使用的是(模板)compiler模式的,因此出现上面的报错信息。

解决方法

解法一: 代码修改为render:

testChild: {
    updated() {
      console.log(this.$attrs.test)
    },
    render(h) {
   	  return (<div {...{attrs:this.$attrs}}>hello</div>)  // jsx
    },
} 

v-bindv-onjsx 上的使用:

v-bind ='$attrs'     => {...{attrs:this.\$attrs}}
v-on='$listeners'    => {...{on:this.\$listeners}}

解法二: vue.config.js文件加上webpack的配置:

  configureWebpack: (config) => {
    config.resolve.alias = {
      ...config.resolve.alias,
    
      // 加上这句
      'vue$': 'vue/dist/vue.esm.js' 
    }
  }

重新跑一下就好了

解法三: 修改引入的Vue:import Vue from 'vue/dist/vue.esm.js'

// 默认runtime模式,指向了"dist/vue.runtime.common.js"位置
import Vue from 'vue';

// 如果要采用template模式, 要修改成template模式的路径:vue/dist/vue.esm.js
import Vue from 'vue/dist/vue.esm.js'

这种方式举例:

import Vue from 'vue/dist/vue.esm.js'

// 标准的vue组件引入
import childComponent from '@/views/childComponent.vue'

// 动态组件,这里采用的是模板编译, 与现有使用的runtime模式不一致,要么修改成render函数,要么修改vue的引入, 这里用后者
 const Card = Vue.extend(childComponent)

 // 动态挂载相应的组件
 const vueComponent = new Card({
   el: '#toImg',
   propsData: {
     [paramsName]: { // props 参数信息}
   }
 })

template与render的区别

来源:https://www.jianshu.com/p/0555e7acc5d1

  1. VUE一般使用template来创建HTML,而使用javascript来创建html要使用render函数。

  2. template逻辑简单,易理解,但灵活性不足,template最终还是要通过render的方式再次进行编译;
    render渲染很灵活,通过createElement的方式创建虚拟DOM。

  3. render(高)的性能要比tempate(低)要高。

  4. render函数的优先级大于template,同时存在最终渲染render

Logo

前往低代码交流专区

更多推荐