zoukankan      html  css  js  c++  java
  • template or render function not defined.

    template or render function not defined.

    96 
    H_婷 
    2018.08.16 17:22 字数 106 阅读 3859评论 0

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

  • 相关阅读:
    JAVA 线程安全与同步机制
    JAVA 多线程
    el-table 宽度自适应bug
    详解迭代器Iterator
    理解基本类型的溢出
    理解classpath
    I/O(一):基础知识
    C++: 智能指针
    C++: 值类别与移动语义基础
    CUDA 架构与编程概述
  • 原文地址:https://www.cnblogs.com/guiyishanren/p/10657719.html
Copyright © 2011-2022 走看看