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 非常完美比客户要 ...
随机推荐
- pycharm问题
Pycharm 出现Unresolved reference '' 错误的解决方法:http://www.mamicode.com/info-detail-2190842.html
- 获取指定开始行数$start，跨度$limit的文件内容
// 获取指定开始行数$page,跨度$step的文件内容 function getLine($file_name, $start, $limit) { $f = new SplFileObject( ...
- JavaMaven【七、插件使用】
配置pom.xml 配置在那个周期的那个阶段执行该插件的功能 上图是配置了使用插件source3.0.1,该插件的功能是打包源码 并配置了在package阶段后执行打包源码的操作jar-no-fork ...
- MySQL连表查询练习题
1.建库 库名:linux50 字符集:utf8 校验规则:utf8_general_ci  create database linux4 charset utf8 default collate ...
- Linux下周期性查看GPU状态
Linux下周期性查看GPU状态 NVIDIA自带了nvidia-smi命令来查看GPU的使用情况 了解一下watch命令 $ whatis watch watch (1) - execute a p ...
- windows环境下备份与恢复，与文件拷贝
mySQL数据库在windows环境下备份与恢复 解压版需进入数据库安装目录.安装版可以忽略本步骤: 1.先在运行中输入CMD,启动命令行2.进入Mysql的Bin目录:E:\Program File ...
- springboot集成Spring Session
10.1 分布式集群环境下的集成(同域名.同项目) 10.1.1 创建SpringBoot的web支持项目07-springboot-session 创建项目 10.1.2 ...
- 开源框架相关面试问题-butterknife注解框架面试问题讲解
butterknife使用简介: 它的出现主要是为了解决咱们在android开发中会写大量的findViewById().setOnClickListener()这样的索然无味的代码,其实它就是一个依 ...
- php的lareval框架配置出错
前两天,在学习php的 lareval 框架时,从官网上下载完lareval的安装包后,按照网上的配置教程一点一点的配置完后,当点击public 文件运行时就出现一个让我很头痛的问题,我自己外加两个大 ...
- Kafka、RabbitMQ、RocketMQ等 消息中间件 介绍和对比
文章目录 1.前言 2.概念 2.1.MQ简介 2.2.MQ特点 2.2.1.先进先出 2.2.2.发布订阅 2.2.3.持久化 2.2.4.分布式 3.消息中间件性能究竟哪家强? 3.1.Kafka ...