template or render function not defined.
下午写 Vue $parent 实例时,总是遇到这个问题,不禁让人陷入沉思
![](https://upload-images.jianshu.io/upload_images/3502048-c0a15c3506cc5c56.gif?imageMogr2/auto-orient/strip%7CimageView2/2/w/240/format/webp)
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>
这是报错信息:
![](https://upload-images.jianshu.io/upload_images/3502048-6eff216d7b0d2a7d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/660/format/webp)
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 实例选项。