template or render function not defined.

H_婷 关注

2018.08.16 17:22 字数 106 阅读 3859评论 0喜欢 2

下午写 Vue $parent 实例时,总是遇到这个问题,不禁让人陷入沉思

 
1.gif

Vue,醒醒啊,你怎么了,贴上子组件源代码

<template>
<div>
<child-component1></child-component1>
<child-component2></child-component2>
<button v-on:click="showChildComponentData">显示子组件的数据</button>
</div>
</template> <script>
export default{
components: {
'child-component1': {
template: '#child-component1',
data: function () {
return {
msg: 'child component 111111'
}
}
},
'child-component2': {
template: '#child-component2',
data: function () {
return {
msg: 'child component 222222'
}
}
}
},
methods: {
showChildComponentData: function () {
for (var i = 0; i < this.$children.length; i++) {
alert(this.$children[i].msg)
}
}
}
}
</script>

这是报错信息:

 
1.png

修改后的代码:

<template>
<div>
<child-component1></child-component1>
<child-component2></child-component2>
<button v-on:click="showChildComponentData">显示子组件的数据</button>
</div>
</template> <script>
export default{
components: {
'child-component1': {
template: '<p>I am ok</p>',
data: function () {
return {
msg: 'child component 111111'
}
}
},
'child-component2': {
template: '<p>ok</p>',
data: function () {
return {
msg: 'child component 222222'
}
}
}
},
methods: {
showChildComponentData: function () {
for (var i = 0; i < this.$children.length; i++) {
alert(this.$children[i].msg)
}
}
}
}
</script>

这样就好了,原因是 Vue 的构建,运行时构建删除了模板编译的功能,因此无法支持带 template 属性的 Vue 实例选项。

template or render function not defined.的更多相关文章

  1. template or render function not defined vue 突然报错了,怎么解决

    报错图例如下:template or render function not defined vue 突然报错了,怎么解决什么错误呢,就是加载不出来,网上看了一通,是vue版本不对,是vue-comp ...

  2. Failed to mount component: template or render function not defined.

    Failed to mount component: template or render function not defined. vue-loader13.0有一个变更就是默认启用了esModu ...

  3. "[Vue warn]: Failed to mount component: template or render function not defined"错误的解决

    VUE中动态路由出错: vue.esm.js?a026: [Vue warn]: Failed to mount component: template or render function not ...

  4. [Vue warn]: Failed to mount component: template or render function not defined. 错误解决方法

    解决方法import Vue from "vue"; 默认引入的文件是 vue/dist/vue.runtime.common.js.这个可以在node_modules/vue/p ...

  5. [Vue warn]: Failed to mount component: template or render function not defined.解决方案

    命名视图 vue router 里有一个 模式叫做 命名视图 本来一个页面里面只能有一个路由视图 对应 一个组件,现在可以多个路由视图 对应 多个组件. 出错点 点击标签之后,<router-v ...

  6. [Vue warn]: Failed to mount component: template or render function not defined. found in ---> <XFbwz> at src/views/XFbwz.vue <App> at src/App.vue <Root>

    1.引入.vue文件忘记加.vue 2.引入文件内容为空

  7. [Vue @Component] Control Template Contents with Vue's Render Function

    Declaring templates and elements inside of templates works great for most scenarios. Sometimes you n ...

  8. [AngularJS] ngModelController render function

    ModelValue and ViewValue: $viewValue: Actual string value in the view. $modelValue: The value in the ...

  9. vue实例属性之el,template,render

    一.el,template,render属性优先性当Vue选项对象中有render渲染函数时,Vue构造函数将直接使用渲染函数渲染DOM树,当选项对象中没有render渲染函数时,Vue构造函数首先通 ...

随机推荐

  1. 《Visual C++ 2010入门教程》系列六:VC2010常见调试技术

    <Visual C++ 2010入门教程>系列六:VC2010常见调试技术   犹豫了好久,最终还是决定开始这一章,因为我不清楚到底有没有必要写这样的一章,是应该在这里说明一些简单的调试方 ...

  2. I.MX6 dhcpcd 需要指定网卡

    /************************************************************************** * I.MX6 dhcpcd 需要指定网卡 * ...

  3. JavaScript 算法与数据结构(转载)

    JavaScript 算法与数据结构 https://github.com/trekhleb/javascript-algorithms/blob/master/README.zh-CN.md

  4. Linux 平台下阅读源码的工具链

    原文:http://blog.jobbole.com/101322/ 前言 看源代码是一个程序员必须经历的事情,也是可以提升能力的一个捷径.个人认为: 要完全掌握一个软件的方法只有阅读源码. 在Win ...

  5. 如何替换某文件中的所有的特定字符?---linux sed命令(文本编辑命令) (转载)

    转自:http://blog.csdn.net/year_9/article/details/20318407 sed是一个很好的文件处理工具,主要是以行为单位进行处理,可以将数据行进行替换.删除.新 ...

  6. 切换或者用户登录时 出现 显示 -bash-4.2$ 问题 的解决

    集群的普通用户在登录用户或者切换用户时,出现 -bash-4.2$ 的状态: [goldwind@TR-OS-DB 9.4]#su postgres bash-4.2$ 原因:在linux下通过use ...

  7. bzoj 3612: [Heoi2014]平衡【整数划分dp】

    其实就是-n~n中求选k个不同的数,和为0的方案数 学到了新姿势叫整数划分,具体实现是dp 详见:https://blog.csdn.net/Vmurder/article/details/42551 ...

  8. hdu 1071 The area【定积分】

    用顶点式\( a(x-h)^2+k=y \)解方程,转化为\(ax^2+bx+c=y \)的形式,然后对二次函数求定积分\( \frac{ax^3}{3}+\frac{bx^2}{2}+cx+C \) ...

  9. 洛谷P3239 [HNOI2015]亚瑟王(期望dp)

    传送门 stdcall大佬好强 期望的姿势不是很高……据大佬说期望有一个线性性质,也就是说可以把每一张牌的期望伤害算出来然后再加起来就是总的期望伤害 因为每一张牌只能用一次,我们设$dp[i]$表示第 ...

  10. thinkphp数据库查重方法

    $test_data = M('hot'); //实例化数据表 $data = $test_data->Distinct(true)->field('descriprion')->o ...