vue组件通信几种方式(使用第三方库的Vue组件报错)

用户投稿 • 2022-03-19 00:16 星期六 • 阅读 69

vue组件通信几种方式？props、 $emit/ $on、vuex、 $parent / $children、 $attrs/ $listeners和provide/inject。

最近在使用第三方库的Vue组件时，都正常import而且，全局注册了，但在使用组件时却一直出不来效果，看console报错类似如下提示：

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.
found in….

具体报错图如下：
You are using the runtime-only build of Vue where the template compiler is not available

问题分析

在项目配置的时候，默认 npm 包导出的是运行时构建，即 runtime 版本，不支持编译 template 模板。

vue 在初始化项目配置的时候，有两个运行环境配置的版本：Compiler 版本、Runtime 版本。
其主要区别在于：

1、Compiler 版本：
可以对 template 模板内容进行编译（包括字符串模板和可以绑定的 html 对象作为模板），例如：

new Vue({
  el: "#box",
  template: "<div>{{msg}}</div>",
  data: {
    msg: "hello"
  }
});

2、Runtime 版本：
使用 vue-loader 加载.vue 文件（组件文件）时，webpack 在打包过程中对模板进行了渲染。

解决办法

只需要在vue.config.js配置文件中新增如下runtimeCompiler配置即可

module.exports = {
  runtimeCompiler: true,
}

然后再去重启项目的发现就不会报这个错了，而且组件引用也正常了。

版权声明：本站所有文章，如无特殊说明，均为本站原创。转载请务必注明文章来源，谢谢支持。
本文链接：https://www.panziye.com/java/4673.html

本文《vue组件通信几种方式(使用第三方库的Vue组件报错)》由网赚联盟（ wangzhuan.org.cn ）整理或原创，感谢您的阅读。

随机文章

搜素引擎算法
关键词排名优化
网站内容优化
GEO培训
SEO小小课堂网
SEO教程
友情链接交换
搜素引擎算法

百度搜索“网赚联盟”即可找到本站，微信搜索“小小课堂网”关注小小课堂网公众号。网赚联盟（ wangzhuan.org.cn ）欢迎用户投稿，发布者：用户投稿，文章版权归作者所有，投稿文章不代表网赚联盟立场，中二少年发布为网赚联盟原创文章，转载请注明出处：https://wangzhuan.org.cn/236445.html