地址：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. Windows下anaconda安装opencv

    win+R打开cmd界面,输入conda create -n opencv python=3.6,创建名为opencv的虚拟空间,然后一路y,直到安装完成. activate opencv 然后输入  ...

  2. metasploit下Windows的多种提权方法

    metasploit下Windows的多种提权方法 前言 当你在爱害者的机器上执行一些操作时,发现有一些操作被拒绝执行,为了获得受害机器的完全权限,你需要绕过限制,获取本来没有的一些权限,这些权限可以 ...

  3. BUUCTF--刮开有奖

    文件链接:https://buuoj.cn/files/abe6e2152471e1e1cbd9e5c0cae95d29/8f80610b-8701-4c7f-ad60-63861a558a5b.ex ...

  4. PHP内置函数parse_str会自动进行urldecode（URL解码）

    用法:void parse_str ( string $str [, array &$arr] ) parse_str用来解析(分离)URL中的查询字符串(Query String),所谓查询 ...

  5. rabbitmq 结构体

    amqp_basic_properties_t props; props._flags = AMQP_BASIC_CONTENT_TYPE_FLAG | AMQP_BASIC_DELIVERY_MOD ...

  6. Swoole 简单学习（2）

    Swoole 简单学习(2) swoole之tcp服务器: //创建tcp服务器new swoole_server(string $host,int $port,int $mode=SWOOLE_PR ...

  7. Ubuntu 服务器Webmin错误的解决

    一:This web server is running in SSL mode. Try the URL https://***********:10000/ instead. 解决方案: 1.ss ...

  8. ApplicationContext用法示例

    1.通过ApplicationContext将bean注入容器中 import org.springframework.context.ApplicationContext; import org.s ...

  9. svnkit 异常：Exception in thread "main" org.tmatesoft.svn.core.SVNException: svn: E200030: SQLite error

    https://stackoverflow.com/questions/16063105/org-tmatesoft-sqljet-core-sqljetexception-busy-error-co ...

  10. MFC的DoModal（转）

    DoModal会产生模态对话框(有模式的对话框,有“是”或者“否”供用户选择),函数运行到此处后不会马上返回,会等待用户的响应(响应后对话框销毁),在此对话框未销毁前,其他窗口不会接收到用户的输入(注 ...