手记

template or render function not defined.

下午写 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 实例选项。



作者:H_婷
链接:https://www.jianshu.com/p/ecc97f18286c


0人推荐
随时随地看视频
慕课网APP