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. hdu 4632区间dp 回文字串计数问题

    Palindrome subsequence Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/65535 K (Java/ ...

  2. JDBC24homework

    编写程序: 创建一个类DBTools,在DBTools中创建一个方法find,find方法用于对数据库进行查询操作,现在要求将结果集封装成数组线性表嵌套数组的形式: ArrayList<Stri ...

  3. C#中word文档转html

    var path = Request.Url.Host + ":" + Request.Url.Port + list[i].AnnexPath; //html保存路径 strin ...

  4. 使用 “Unicode 字符集 ” 使用错误,应该使用 “使用多字节字符集”

    “void ATL::CStringT<BaseType,StringTraits>::Format(const wchar_t *,...)”: 不能将参数 1 从“const char ...

  5. (九)How to use the audio gadget driver

    Contents [hide]  1 Introduction 2 Audio Gadget Driver 1.0 2.1 Enabling the audio gadget driver 2.2 U ...

  6. JavaScript在页面中的执行顺序(理解声明式函数与赋值式函数) 转载

    JavaScript在页面中的执行顺序 https://blog.csdn.net/superhoy/article/details/52946277 2016年10月27日 15:38:52 阅读数 ...

  7. c3p0的错误mchange.v2.ser.Indirector

      mchange-commons-java-0.2.11.jar   没有会报错 (java.lang.NoClassDefFoundError:com.mchange.v2.ser.Indirec ...

  8. xtrabackup的使用

    Percona-xtrabackup是 Percona公司开发的一个用于MySQL数据库物理热备的备份工具. 一.安装xtrabackup 采用rpm包的方式进行安装 [root@server- ~] ...

  9. linux中centos6.9环境下的python3.6和pip的安装

    安装python3.6可能使用的依赖# yum install openssl-devel bzip2-devel expat-devel gdbm-devel readline-devel sqli ...

  10. php类知识----特别用法

    spl_autoload_register注册 <?php #spl_autoload_register-----这个例子是用来打印实例化类的类名 function thereisagameof ...