Vue_(组件通讯)组件

　　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_(组件通讯)组件的更多相关文章

Vue中父子组件通讯——组件todolist
一.todolist功能开发 <div id="root"> <div> <input type="text" v-model=& ...
Angular6 基础（数据绑定、生命周期、父子组件通讯、响应式编程）
Angular相比于vue来说,更像一个完整的框架,本身就集成了很多模块,如路由,HTTP,服务等,而vue是需要另外引入比如(vuex,axios等).Angular引入了依赖注入.单元测试.类等后 ...
Vue组件通讯黑科技
Vue组件通讯组件可谓是 Vue框架的最有特色之一, 可以将一大块拆分为小零件最后组装起来.这样的好处易于维护.扩展和复用等. 提到 Vue的组件, 相必大家对Vue组件之间的数据流并不陌生.最常规 ...
在WEB项目中调用QQ通讯组件打开QQ聊天界面
在很多WEB项目中,需要提供在线服务的功能,加上自己的联系方式,例如:QQ,不用添加QQ好友也可以交谈,那这到底是怎么实现的呢? 对于这个功能,需要提到一个组件,即“QQ通讯组件”.QQ通讯组件是一种 ...
.Net Core开源通讯组件 SmartRoute(服务即集群)
SmartRoute是基于Dotnet Core设计的可运行在linux和windows下的服务通讯组件,其设计理念是去中心化和零配置即可实现服务通讯集群.SmartRoute是通过消息订阅的机制实现 ...
跨平台开源通讯组件elastic communication
elastic communication是基于c#开发支持.net和mono的通讯组件(简称EC),EC的主要目的简化mono和.net下的通讯开发难度,通过EC可以非常快速地开发基于mono和.n ...
突破自我，开源NetWorkSocket通讯组件
前言在<化茧成蝶,开源NetWorkSocket通讯组件>发表之后,收到大家很多个star,在此感谢!更可贵的是,一些网友提出了许多好建议,经过一些时间的思考,决定将NetworkSoc ...
Angular1.x组件通讯方式总结
Angular1开发模式这里需要将Angular1分为Angular1.5之前和Angular1.5两个不同的阶段来讲,两者虽然同属Angular1,但是在开发模式上还是有较大区别的.在Angula ...
自己写的中间层..基于通讯组件 RTC
273265088 我用原生Listbox与你的组件组合...创造了奇迹..搞了一个非常复杂的 UI .. 每个item高度包括里面的元素以及事件都是动态的搞了好几个小时感觉UI 非常完美比客户要 ...

随机推荐

Gluster的搭建和使用
Gluster的搭建和使用序言我们为什么要去使用分布式存储,在一家大型公司或者大规模的集群中,大家可能会经常遇到一个问题,我的数据怎么存放,放在那,数据空间不够了怎么办,这些问题经常困扰着我们. ...
C#选择文件保存路劲
private void button8_Click(object sender, EventArgs e) { FolderBrowserDialog dialog = new FolderBrow ...
vue项目时间戳转格式
项目用了 element UI的日期插件,修改时时间回显不了,打印出来是换行了,因此要转换 changeTime(value){ let date = new Date(value); let y ...
python之字典一
字典的定义: 前面我们说过列表,它适合于将值组织到一个结构中并且通过编号对其进行引用.字典则是通过名字来引用值的数据结构,并且把这种数据结构称为映射,字典中的值没有特殊的顺序,都存储在一个特定的键(k ...
Java学习笔记【五、字符串】
String类 11种构造,不一一列举常用方法 s.length() 返回字符串长度 s1.contact(s2) 连接s1.s2 String.format("aaa %f bbb %d ...
Bmake
Bmake is a common makefile framework. Both support native build and cross build. Easy for use, modif ...
linux网络协议栈--路由流程分析
转:http://blog.csdn.net/hsly_support/article/details/8797976 来吧,路由路由是网络的核心,是linux网络协议栈的核心,我们找个入口进去看看 ...
根文件系统ramdisk.image.gz && uramdisk.image.gz
1. 根文件系统镜像ramdisk.image.gz和uramdisk.image.gz 通常需要将文件系统输入到Nand Flash当中时,一般可以将根文件系统打包成uramdisk.image.g ...
1.Lucene简介
1.Lucene简介 Lucene是一个基于Java的全文信息检索工具包,它不是一个完整的搜索应用程序,而是为你的应用程序提供索引和搜索功能 Lucene是开源项目,它是可扩展,高性能的库用于索引和搜 ...
OSI七层协议模型、TCP/IP四层模型
OSI七层协议模型 TCP/IP四层模型首先我们梳理一下每层模型的职责: 链路层:对0和1进行分组,定义数据帧,确认主机的物理地址,传输数据: 网络层:定义IP地址,确认主机所在的网络位置,并通过I ...

Vue_(组件通讯)组件

三、this is component-a

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

随机推荐

热门专题