Vue组件  传送门

  组件Component,可扩展HTML元素,封装可重用的代码。通俗的来说,组件将可重用的HTML元素封装成为标签方便复用;

  组件的使用:

  使用全局方法Vue.extend创建构造器;

  再使用全局方法Vue.component注册组件;

  在Vue.component里需要指明组件的名称,组件名称不能使用内置标签名称,如body

  推荐使用短横线命名规则。例:

    my-component 正确 (推荐)

    my-Component 错误

    mycomponent 正确

    Mycomponent 正确

    myComponent 错误

    MyComponent 错误

  Learn

    一、组件注册 

    二、全局组件与局部组件

    三、this is component-a

  目录结构

  

  【每个demo下方都存有html源码】

一、组件注册  传送门

  第一种方法:使用构造器注册组件

        <div id="GaryId">
<!--<h1>hello Vue</h1>-->
<my-component></my-component>
</div>
            //创建构造器
let myComponent = Vue.extend({
template:"<h1>hello Vue</h1>"
}) //注册组件
Vue.component('my-component',myComponent);

  第二种方法:组件的简写

        <div id="GaryId">
<!--<h1>hello Vue</h1>-->
<my-componenta></my-componenta>
</div>
            //注册组件的简写
Vue.component('my-componenta',{
template:"<h2>hello Gary</h2>"
})

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gary</title>
</head>
<body>
<div id="GaryId">
<!--<h1>hello Vue</h1>-->
<my-component></my-component>
<my-componenta></my-componenta>
</div>
</body> <script type="text/javascript" src="../js/vue.js" ></script>
<script type="text/javascript"> //创建构造器
let myComponent = Vue.extend({
template:"<h1>hello Vue</h1>"
}) //注册组件
Vue.component('my-component',myComponent); //注册组件的简写
Vue.component('my-componenta',{
template:"<h2>hello Gary</h2>"
}) new Vue({
data:{
msg:'Gary'
}
}).$mount("#GaryId");
</script>
</html>

Gary_component.html

 二、全局组件与局部组件  传送门

  组件可分为全局组件与局部组件;

  全局组件:

    在全局API中的Vue.component注册

    该项目中所有Vue实例内均可以使用

  局部组件:

    在Vue实例中的components选项中注册

    只能在本实例中使用

  全局组件和局部组件都可以存储数据,但是存储的方式与Vue实例中的data稍有不同;

  组件里存储数据,data后需加上函数,数据写在函数体中

  this is component-a作为局部属性使用

局部组件:只可以再div id="GaryId"中使用

        <div id="GaryId">
<my-component-a></my-component-a>
</div>
            new Vue({
data:{
msg:'Gary'
},
components:{
"my-component-a":{
template:"<h2>this is component-a</h2>"
}
}
}).$mount("#GaryId");
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gary</title>
</head>
<body>
<div id="GaryId">
<my-component-a></my-component-a>
</div>
</body> <script type="text/javascript" src="../js/vue.js" ></script>
<script type="text/javascript"> new Vue({
data:{
msg:'Gary'
},
components:{
"my-component-a":{
template:"<h2>this is component-a</h2>"
}
}
}).$mount("#GaryId"); </script>
</html>

Gary_component-02.html

全局属性:可以在任意div中调用

        <div id="GaryId">
<my-component-a></my-component-a>
<my-component-b></my-component-b>
</div>
            //注册组件的简写(默认全局)
Vue.component('my-component-b',{
template:"<h2>{{name}}</h2>",
data:function(){
return {
name:'this is component-b'
}
}
})
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gary</title>
</head>
<body>
<div id="GaryId">
<my-component-a></my-component-a>
<my-component-b></my-component-b>
</div>
</body> <script type="text/javascript" src="../js/vue.js" ></script>
<script type="text/javascript"> //注册组件的简写(默认全局)
Vue.component('my-component-b',{
template:"<h2>{{name}}</h2>",
data:function(){
return {
name:'this is component-b'
}
}
}) new Vue({
data:{
msg:'Gary'
},
components:{
"my-component-a":{
template:"<h2>this is component-a</h2>"
}
}
}).$mount("#GaryId"); </script>
</html>

Gary_component-02.html

三、this is component-a

  在component的template中书写大量的HTML元素很麻烦

  Vue提供了<template>标签,可以在里边书写HTML,然后通过ID指定到组建内的template属性上;

  <body>标签中调用组件

        <div id="GaryId">
<my-component-b></my-component-b>
</div>

  在<template>标签中通过id"my-template"添加组件

        <template id="my-template">
<div>
<h2>{{name}}</h2>
<button @click="count++">{{count}}</button>
<ul>
<li v-for="item in numArray">{{item}}</li>
</ul>
</div>
</template>
new Vue({
data : {
msg : '123'
},
components : {
"my-component-b" : {
template : "#my-template",
data(){
return {
name : "my-component-b !!",
numArray : [1, 2, 3, 4, 5],
count : 0
}
}
}
}
}).$mount("#GaryId");

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gary</title>
</head>
<body>
<div id="GaryId">
<my-component-b></my-component-b>
</div>
</body> <template id="my-template">
<div>
<h2>{{name}}</h2>
<button @click="count++">{{count}}</button>
<ul>
<li v-for="item in numArray">{{item}}</li>
</ul>
</div>
</template> <script type="text/javascript" src="../js/vue.js" ></script>
<script type="text/javascript"> new Vue({
data : {
msg : '123'
},
components : {
"my-component-b" : {
template : "#my-template",
data(){
return {
name : "my-component-b !!",
numArray : [1, 2, 3, 4, 5],
count : 0
}
}
}
}
}).$mount("#GaryId"); </script>
</html>

Gary_component-03.html

Vue_(组件通讯)组件的更多相关文章

  1. Vue中父子组件通讯——组件todolist

    一.todolist功能开发 <div id="root"> <div> <input type="text" v-model=& ...

  2. Angular6 基础(数据绑定、生命周期、父子组件通讯、响应式编程)

    Angular相比于vue来说,更像一个完整的框架,本身就集成了很多模块,如路由,HTTP,服务等,而vue是需要另外引入比如(vuex,axios等).Angular引入了依赖注入.单元测试.类等后 ...

  3. Vue组件通讯黑科技

    Vue组件通讯 组件可谓是 Vue框架的最有特色之一, 可以将一大块拆分为小零件最后组装起来.这样的好处易于维护.扩展和复用等. 提到 Vue的组件, 相必大家对Vue组件之间的数据流并不陌生.最常规 ...

  4. 在WEB项目中调用QQ通讯组件打开QQ聊天界面

    在很多WEB项目中,需要提供在线服务的功能,加上自己的联系方式,例如:QQ,不用添加QQ好友也可以交谈,那这到底是怎么实现的呢? 对于这个功能,需要提到一个组件,即“QQ通讯组件”.QQ通讯组件是一种 ...

  5. .Net Core开源通讯组件 SmartRoute(服务即集群)

    SmartRoute是基于Dotnet Core设计的可运行在linux和windows下的服务通讯组件,其设计理念是去中心化和零配置即可实现服务通讯集群.SmartRoute是通过消息订阅的机制实现 ...

  6. 跨平台开源通讯组件elastic communication

    elastic communication是基于c#开发支持.net和mono的通讯组件(简称EC),EC的主要目的简化mono和.net下的通讯开发难度,通过EC可以非常快速地开发基于mono和.n ...

  7. 突破自我,开源NetWorkSocket通讯组件

    前言 在<化茧成蝶,开源NetWorkSocket通讯组件>发表之后,收到大家很多个star,在此感谢!更可贵的是,一些网友提出了许多好建议,经过一些时间的思考,决定将NetworkSoc ...

  8. Angular1.x组件通讯方式总结

    Angular1开发模式 这里需要将Angular1分为Angular1.5之前和Angular1.5两个不同的阶段来讲,两者虽然同属Angular1,但是在开发模式上还是有较大区别的.在Angula ...

  9. 自己写的中间层..基于通讯组件 RTC

    273265088 我用原生Listbox与你的组件组合...创造了奇迹..搞了一个非常复杂的 UI .. 每个item高度 包括里面的元素 以及事件都是动态的搞了好几个小时感觉UI 非常完美比客户要 ...

随机推荐

  1. 手把手教你搭建FastDFS集群(中)

    手把手教你搭建FastDFS集群(中) 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/u0 ...

  2. JS基础_条件分支语句:switch语句

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. JS基础_if练习二

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  4. javascript中对编码的解读

    首先来一下js知识的巩固与复习 js对文字进行编码涉及3个函数:escape,encodeURI,encodeURIComponent,相应3个解码函数:unescape,decodeURI,deco ...

  5. 第二十四篇 jQuery 学习6 删除元素

    jQuery 学习6 删除元素   上节课我们做了添加元素,模拟的是楼主发的文章,路人评论,那么同学们这节课学了删除之后,去之前的代码上添加一个删除,模拟一个楼主删除路人的评论. jQuery的删除方 ...

  6. SQLServer 主键插入

    设置此命令后可以往主键插入值 set IDENTITY_INSERT 表名 on set IDENTITY_INSERT 表名 off 注意: 此语句是一个整体操作 反例: 先单步执行:set IDE ...

  7. C# Monitor Wait()和Pulse()

    C# Monitor Wait()和Pulse()   1.Monitor.Wait方法当线程调用 Wait 时,它释放对象的锁并进入对象的等待队列,对象的就绪队列中的下一个线程(如果有)获取锁并拥有 ...

  8. python 匿名函数lambda使用

    lambda函数语法格式: lambda函数 后面参数可以有一个或多个,冒号后面是python表达式: lambda 参数1,参数2,参数3...:表达式 # 一个参数情况: a = lambda x ...

  9. 最终章·MySQL从入门到高可用架构报错解决

    1. 报错原因:MySQL的socket文件目录不存在. 解决方法:创建MySQL的socket文件目录 mkdir /application/mysql-5.6.38/tmp 2. 报错原因:soc ...

  10. 【转】sscanf函数用法实例

    sscanf() - 从一个字符串中读进与指定格式相符的数据.  函数原型:  Int sscanf( string str, string fmt, mixed var1, mixed var2 . ...