地址：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. .net 异步

    原文:https://www.cnblogs.com/wisdomqq/archive/2012/03/26/2412349.html 在说到异步前,先来理一下几个容易混淆的概念,并行.多线程.异步. ...

  2. 理解Thread.sleep()函数

    转载自:http://www.cnblogs.com/ILove/archive/2008/04/07/1140419.html 我们可能经常会用到 Thread.Sleep 函数来使线程挂起一段时间 ...

  3. shell截取小数点前后的子串

  4. 2019年 Java 面试题解析

    2019年 Java 面试题解析 转载地址:https://www.cnblogs.com/Zz-maker/p/11193930.html 作者: Zz_maker 包含的模块: 本文分为十九个模块 ...

  5. ffmpeg音频文件转换之使用stdin/stdout或BytesIO对象输入输出

    最近在搞小程序录音,然后使用百度接口做语音识别. 小程序目前仅支持mp3和aac编码格式.虽然百度接口提供的m4a格式支持能直接识别小程序的录音文件,但由于自己还有其他一系列需求(比如直接读取数据,根 ...

  6. 4——class和struct

    class的定义看上去很像struct定义的扩展, 事实上,类定义时的关键字class完全可以替换成struct,也就是说,结构体变量也可以有成员函数. class和struct的唯一区别在于:str ...

  7. linux ---JDK的安装与配置--两种方式

    linux下的JDK的安装与配置:JDK的安装有两种方式: tar包和rpm安装1.tar包安装: 下载地址:http://www.oracle.com/technetwork/java/javase ...

  8. MYSQL5.7版本sql_mode=only_full_group_by问题，重启有效的方法

    1./etc/mysql/mysql.conf.d/mysqld.cnf 或者my.cnf   总之就是mysql的配置文件 2.查看当前的sql模式 select @@sql_mode; 3.添加语 ...

  9. 2019CCPC网络预选赛 1004 path 最短路

    题意:给你一张n个点m条边的有向图,问这张有向图的所有路径中第k短的路径长度是多少?n, m, k均为5e4级别. 思路:前些日子有一场div3的F和这个题有点像,但是那个题要求的是最短路,并且k最大 ...

  10. 【leetcode】636. Exclusive Time of Functions

    题目如下: 解题思路:本题和括号匹配问题有点像,用栈比较适合.一个元素入栈前,如果自己的状态是“start”,则直接入栈:如果是end则判断和栈顶的元素是否id相同并且状态是“start”,如果满足这 ...