地址：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. 关于JSON.stringify()与JSON.parse()

    一.JSON.stringify()与JSON.parse()的区别 JSON.stringify()的作用是将js值转换成JSON字符串,而JSON.parse()是将JSON字符串转换成一个对象. ...

  2. CSRF——跨站请求伪造

    一.CSRF是什么CSRF,全称:Corss-site request forgery,中文名称:跨站请求伪造.CSRF攻击比XSS攻击更具危险性,被安全界称为“沉睡的巨人”. 二.CSRF可以做什么 ...

  3. spring(五)：spring中Aware接口的使用

    spring中自定义组件需要使用spring的底层组件时,可以通过自定义组件实现相关XxxAware接口,重写其中的方法进而实现 例如:自定义一个组件,该组件中需要使用ApplicationConte ...

  4. css文本内容大于内本显示框设置其显示方式

    1. <style type="text/css"> .text-ellipsis{ overflow: hidden;//隐藏滚动条 white-space: now ...

  5. html中内联元素和块级元素的区别

    1.下表列出了内联元素和块级元素的主要区别 html中内联元素和块级元素的区别 块级元素 行内元素 独占一行,默认情况下,其宽度自动填满其父元素宽度 相邻的行内元素会排列在同一行里,直到一行排不下,才 ...

  6. C# 对象转JSON字符串

    对象转JSON字符串 /// <summary> /// 对象转Json字符串 /// </summary> /// <param name="obj" ...

  7. MySQL--19 MHA切换日志分析

    MHA切换检测日志分析 GTID模式 [root@db03 ~]# tail -f /etc/mha/manager.log #在MySQL select ping:2006上出错(MySQL服务器已 ...

  8. hdu1210Eddy's 洗牌问题

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1210 Eddy是个ACMer,他不仅喜欢做ACM题,而且对于纸牌也有一定的研究,他在无聊时研究发现,如 ...

  9. Sass-颜色运算

    所有算数运算都支持颜色值,并且是分段运算的.也就是说,红.绿和蓝各颜色分段单独进行运算.如: p { color: #010203 + #040506; } 计算公式为 01 + 04 = 05.02 ...

  10. java static在成员方法中

    package java08; public class Myclass { int num;//成员变量 static int numStatic;//静态变量 //成员方法 public void ...