最近在学习vue，学习组件时，遇到了一个问题，困扰了半个多小时。。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div id="box">

    <parent></parent>

</div>

<template id="parent">

    <child></child>

</template>

<template id="child">

    <button>显示余额</button>

</template>

<script src="../lib/vue.js"></script>

<script !src="">

    var Child = {

        template: "#child"

    }

    var Parent = {

        template: "#parent",

        components: {

            "child": Child

        }

    }

    var vm = new Vue({

        el: "#box",

        components: {

            "parent": Parent

        }

    })

</script>

</body>

</html>

　　当采用以上写法注册局部组件的时候，千万记得，子组件不是注册到实例里的，是注册到父组件上的，且一定要先创建子组件，再在父组件中注册。

Vue 学习笔记之 —— 组件（踩了个坑）的更多相关文章

  1. vue学习笔记(八)组件校验&通信

    前言 在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大 ...

  2. vue学习笔记(七)组件

    前言 在前面vue的一些博客中,我们几乎将vue的基础差不多学习完了,而从本篇博客开始将会进入到vue的另一个阶段性学习,本篇博客的内容在以后的vue项目中占很大的比重,所以小伙伴们需要认真学习,本篇 ...

  3. vue学习笔记(九)vue-cli中的组件通信

    前言 在上一篇博客vue学习笔记(八)组件校验&通信中,我们学会了vue中组件的校验和父组件向子组件传递信息以及子组件通知父组件(父子组件通信),上一篇博客也提到那是对组件内容的刚刚开始,而本 ...

  4. Vue学习笔记-Vue.js-2.X 学习(三)===>组件化高级

    (四) 组件化高级 1.插槽(slot)的基本使用 A:基本使用: <slot></slot> B:默认置:<slot><h1>中间可以放默认值< ...

  5. Vue学习笔记-Vue.js-2.X 学习(二)===>组件化开发

    ===重点重点开始 ========================== (三) 组件化开发 1.创建组件构造器: Vue.extends() 2.注册组件: Vue.component() 3.使用 ...

  6. Vue学习笔记-2

    前言 本文非vue教程,仅为学习vue过程中的个人理解与笔记,有说的不正确的地方欢迎指正讨论 1.computed计算属性函数中不能使用vm变量 在计算属性的函数中,不能使用Vue构造函数返回的vm变 ...

  7. vue 学习笔记（二）

    最近公司赶项目,一直也没时间看 vue,之前看下的都快忘得差不多了.哈哈哈,来一起回顾一下vue 学习笔记(一)后,继续向下看嘛. #表单输入绑定 基础用法 v-model 会忽略所有表单元素的 va ...

  8. vue学习笔记之：为何data是一个方法

    vue学习笔记之:为何data是一个方法 在vue开发中,我们可以发现,data中的属性值是在function中return出来的.可为何data必须是一个函数呢?我们先看官方的解释: 当一个组件被定 ...

  9. vue学习笔记(十)路由

    前言 在上一篇博客vue学习笔记(九)vue-cli中的组件通信内容中,我们学习组件通信的相关内容和进行了一些组件通信的小练习,相信大家已经掌握了vue-cli中的组件通信,而本篇博客将会带你更上一层 ...

随机推荐

  1. laravel新增路由文件

    除去原有路由文件,有时为方便路由管理,我们可以新增独立路由文件,如:针对管理后台的路由文件. 1.在routes文件夹下创建新路由文件admin.php 2.在app\Providers\RouteS ...

  2. 27. Unittest单元测试框架的介绍与使用

    unittest单元测试框架 先贴一下unittest官网地址.unittest文档开头介绍了四个重要的概念:test fixture,test case, test suite, test runn ...

  3. Oracle执行计划不走索引的原因总结

    在Oracle数据库操作中,为什么有时一个表的某个字段明明有索引,当观察一些语的执行计划确不走索引呢?如何解决呢?本文我们主要就介绍这部分内容,接下来就让我们一起来了解一下. 不走索引大体有以下几个原 ...

  4. matlab中struct创建方法

    MATLAB中struct创建方法可分为:直接创建法和struct()函数创建法 (1)直接创建: 直接定义字段,像使用一般matlab变量一样,不需要事先声明,支持动态扩充.下面创建一个Studen ...

  5. pyhon if分支

    在python中,最常用的就是if判断,if判断可以分为单次判断和多次判断 单次判断 if   条件 : (条件成立执行我) else:(else也可以没有,最近的else对应最近的if语句) (条件 ...

  6. 浅析php-fpm和fastcgi的关系

    先讲讲CGI吧 浏览器向web server发起请求的时候,要有url,header,params等等吧,为什么有这些数据呢,这就是CGI的事了,CGI就规定了,传哪些数据,用什么样的格式传输 web ...

  7. Caused by: java.util.MissingResourceException: Can't find bundle for base name javax.servlet.LocalStrings, locale zh_CN

    这个是很早以前的一个bug了,最近开始用idea发现追源码相当方便,于是结合网上的解决方案以及自己的判断追踪一下原因,当然没有深究,只是根据提示一直追而已:先说一下解决方案: <dependen ...

  8. postgresql 两表关联更新

    UPDATE 要更新的表 SET 字段1 = cqt.字段1, 字段2 = cqt.字段2, FROM 数据来源表 cqt WHERE 要更新的表.bsm = cqt.bsm

  9. 安装python及编辑工具PyCharm

    win10下安装python环境,安装编辑工具PyCharm 1.安装 pythonpython安装包下载地址https://www.python.org/ftp/python/3.8.0/pytho ...

  10. Android项目中实现native调用

    转载自搜狗测试公众号,本人学习使用,侵权删 最近小编在做公司输入法项目中java与native交互部分的测试,先简单学习了java代码调用native代码的实现原理,本次与大家一起分享jni协议,了解 ...