地址：https://blog.csdn.net/cofecode/article/details/74634301

创建组件的两种方法

1.全局注册 
2.局部注册

var child=Vue.extend({})

var parent=Vue.extend({})
  • 1
  • 2
  • 3

Vue.extend() 全局方法 生成构造器，创建子类

使用基础 Vue 构造器，创建一个“子类”。

这样写非常繁琐。于是vue进行了简化

使用Vue.component()直接创建和注册组件：

Vue.component(id,options) 全局方法 用来注册全局组件

id 是string类型，即是注册组件的名称 
options 是个对象

// 全局注册，my-component1是标签名称

Vue.component('my-component1',{

    template: '<div>This is the first component!</div>'

})

var vm1 = new Vue({

    el: '#app1'

})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

Vue.component()的第1个参数是标签名称，第2个参数是一个选项对象，使用选项对象的template属性定义组件模板。 
使用这种方式，Vue在背后会自动地调用Vue.extend()。

在选项对象的components属性中实现局部注册：

var vm2 = new Vue({

    el: '#app2',

    components: {

        // 局部注册，my-component2是标签名称

        'my-component2': {

            template: '<div>This is the second component!</div>'

        },

        // 局部注册，my-component3是标签名称

        'my-component3': {

            template: '<div>This is the third component!</div>'

        }

    }

})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

==局部注册都放在选项对象中创建==

注意：这里是components，里面可以定义多个组件。

简化后是这样的写法

<body>

    <div id='box'>

        <parent>

        </parent>

    </div>

    <script src='js/vue.js'></script>

    <script>

        Vue.component('parent',{

            template:`<div><h1>我是父组件</h1><child></child></div>`,

                components:{

                'child':{

                    template:`<h1>我是子组件</h1>`

                }

            }

        })

        new Vue({

            el:'#box'

        })

    </script>

</body>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25

注册一个parent的父组件。然后在父组件的选项对象中注册一个child的子组件。将子组件child的标签写到父组件parent的template里面。

页面上的样式结构就是

<div>

    <h1>我是父组件</h1>

    <h1>我是子组件</h1>

</div>
  • 1
  • 2
  • 3
  • 4

注意：用局部注册的子组件不能单独直接使用！

标签挂在div里，会报错

<div id='box'>

    <child></child>

</div>

结果会报错

Vue 创建组件的两种方法的更多相关文章

  1. vue创建组件的几种方法

    <html> <head> <title>vue创建组件</title> <meta charset="utf-8"> ...

  2. Solr创建Core的两种方法

    创建Core的两种方法: 第一种方法: 1.打开dos命令窗口,切换目录到${solr.home}\bin,然后输入:solr create -c corename之后回车: 2.打开solr安装文件 ...

  3. JS动态创建元素（两种方法）

    前言 创建元素有两种方法 1)将需要创建的元素,以字符串的形式拼接:找到父级元素,直接对父级元素的innnerHTML进行赋值. 2)使用Document.Element对象自带的一些函数,来实现动态 ...

  4. js如何动态创建表格（两种方法）

    js如何动态创建表格(两种方法) 一.总结 一句话总结: 1.方法一:写好创建表格的html代码,将之赋值给div的innerHTML. 2.方法二.直接用创建好的table元素的方法insertRo ...

  5. 进程和创建线程的两种方法(threading.Thread)

    进程 如QQ 要以一个整体的形式暴露给操作系统管理,里面包含对各种资源的调用,内存的管理, 网络接口的调用等,进程就是各种资源管理的集合 线程:是操作系统最小的调度单位,是一串指令的结合 进程 要操作 ...

  6. Java 创建线程的两种方法

    Java提供了线程类Thread来创建多线程的程序.其实,创建线程与创建普通的类的对象的操作是一样的,而线程就是Thread类或其子类的实例对象.每个Thread对象描述了一个单独的线程.要产生一个线 ...

  7. Vue创建组件的三种方式

    1.使用 Vue.extend 来创建全局的Vue组件 <div id="app"> <!-- 如果要使用组件,直接,把组件的名称,以 HTML 标签的形式,引入 ...

  8. AO创建IFeature的两种方法

    原文地址:http://www.cnblogs.com/MyLucifer/archive/2010/12/01/1893212.html 在ArcGIS Resouce Center中,ESRI介绍 ...

  9. (转)Android创建桌面快捷方式两种方法

    [IT168技术]Android在桌面上生成快捷方式有两种情况,一种是直接在桌面直接生成;一种是长按桌面,在弹出的快捷菜单中生成. 谈谈在桌面上直接生成.个人觉得这个比较爽快,既然都是快捷方式了干嘛还 ...

随机推荐

  1. 【java】jstack分析查看线程状态

    演示代码 public class StackTest { public static void main(String[] args) { Thread thread = new Thread(ne ...

  2. js中Date的构造函数解读

    javascript中的内置对象是我们经常会用到的,那么今天我们就来说说Date的四种构造方法吧 一.new Date() 这是我们最常使用也最熟悉不过的Date对象的构造方法了,通过无参数的构造函数 ...

  3. 如何在C#中使用sqlite，一个简单的类

    </pre><pre name="code" class="csharp"> using System.Collections.Gene ...

  4. elasticsearch 深入 —— Post Filter后置过滤器

    过滤查询以及聚合 A natural extension to aggregation scoping is filtering. Because the aggregation operates i ...

  5. Codeforces Round #420 (Div. 2) - C

    题目链接:http://codeforces.com/contest/821/problem/C 题意:起初有一个栈,给定2*n个命令,其中n个命令是往栈加入元素,另外n个命令是从栈中取出元素.你可以 ...

  6. DNS域名系统，简述工作原理

    DNS工作原理: 当DNS客户端需要在程序中使用名称时,它会查询DNS服务器来解析该名称.客户端发送的每条查询信息包括三条信息:指定的DNS域名,指定的查询类型,DNS域名的指定类别.基于UDP服务, ...

  7. vs2005下opengl（glut）的配置记录

    摘自:http://blog.csdn.net/joeblackzqq/article/details/6956959 首先参考了网上的安装配置环境部分:http://blog.csdn.net/Id ...

  8. MySQL索引优化之双表示例

    select * from tableA a left join tableB b on a.f_id = b.id; 索引建tableB表上面, 因为left join 注定左表全都有,所以应该关心 ...

  9. 双十一高并发场景背后的数据库RDS技术揭秘

    [战报]11月11日聚石塔(阿里云数据库RDS产品形态)峰值QPS突破X00w,Proxy 峰值QPS超过X00w. 双十一就要来了,全世界都为其疯狂,但是在双十一抢购中经常会出现几万人抢一个红包或者 ...

  10. OpenCV—Python 轮廓检测 绘出矩形框（findContours\ boundingRect\rectangle

    千万注意opencv的轮廓检测和边缘检测是两码事 本文链接:https://blog.csdn.net/wsp_1138886114/article/details/82945328 1 获取轮廓 O ...