地址：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. 二、Ajax请求MVC中数据查询表返回datatable

    一.Ajax请求MVC中数据查询表返回datatable 解决方式 返回list

  2. kaildi讲解

    转载声明:本文为转载文章 作者:ferb2015 原文地址:https://blog.csdn.net/eqiang8848/article/details/81543599 kaldi是一个开源的语 ...

  3. RandomAccessFile类学习

    RandomAccessFile类学习 RandomAccessFile是io包的类,从Object直接继承而来,只可以对文件进行操作,可以对文件进行读取和写入. 当模式为r:当文件不存在时会报异常: ...

  4. JavaWeb(五)：MVC案例

    MVC是Model-View-Controller的简称,即模型-视图-控制器.MVC是一种设计模式,它把应用程序分成三个核心模块:模型.视图.控制器,它们各自处理自己的任务.模型是应用程序的主体部分 ...

  5. 【leetcode】126. Word Ladder II

    题目如下: 解题思路:DFS或者BFS都行.本题的关键在于减少重复计算.我采用了两种方法:一是用字典dic_ladderlist记录每一个单词可以ladder的单词列表:另外是用dp数组记录从star ...

  6. Juint test Case 的2种使用方式

    通常情况下,我们去测试一个类中的方法,首先是建立一个包,包中建立一个测试类,在建立测试类文件时,选择JUnit Test Case,如下: 建好之后写测试用例: 但是如果偏就想在编写方法的那个java ...

  7. UIView响应事件的两个方法

    参考自:https://blog.csdn.net/mushaofeng1990/article/details/62434349 用户触摸屏幕后的事件传递过程: //方法A-(UIView *)hi ...

  8. C#操作Access的查询、添加、删除、修改源程序

    C#操作Access的查询.添加.删除.修改源程序 using System; using System.Collections.Generic; using System.ComponentMode ...

  9. EAM(Enterprise Asset Management)企业资产管理系统

    EAM (Enterprise Asset Management)的缩写,EAM系统是指企业资产管理系统. EAM系统是在资产比重较大的企业,在资产建设.维护中减少维护成本,提高资产运营效率,通过现代 ...

  10. 实验三 《敏捷开发与XP实践》实验报告

    一.实验内容 任务一 1.参考 http://www.cnblogs.com/rocedu/p/6371315.html#SECCODESTANDARD 安装alibaba 插件,解决代码中的规范问题 ...