根据Vue官方文档学习的笔记

在学习vue时,组件学习比较吃力,尤其是组件间的通信,所以总结一下,官方文档的组件部分。

注册组件

  • 全局组件

语法如下,组件模板需要使用一个根标签包裹起来。data必须是一个方法


Vue.component('component-name',{
template:'<div><h1>标题</h1><span>作者信息</span></div>',
data(){
return{
message:'组件的属性'
}
},
methods:{ }
})
  • 局部组件

var com = {
template:'<div><h1>标题</h1><span>作者信息</span></div>',
data(){
return{
message:'组件的属性'
}
},
methods:{ }
} new Vue({
components:{
'compontent-name':com
}
})

组件通信

  • prop将父组件数据传给子组件

<div id='app'>
<child :msg=message></child>
</div>

<script>
Vue.component('child', {
props: ['msg'],
template: '<p>{{msg}}</p>'
}) new Vue({
el: '#app',
data: {
message: '父组件数据'
}
})
</script>

利用子组件的props选项,父组件可以向子组件传递数据,但是子组件不能求改父组件的数据。

  • 非父子组件通信

需要使用一个空的Vue实例来管理


<div id='app'>
<com-a></com-a>
<com-b></com-b>
</div>

var bus = new Vue(); var coma = {
template: '<p @click="send">{{adata}}</p>',
data(){
return {
adata: 'a的数据'
}
},
methods:{
send(){
// 触发这一事件
bus.$emit('data-to-b', this.adata);
}
} }; var comb= {
template: '<p>{{bdata}}</p>',
data(){
return {
bdata: 'b的数据'
}
},
mounted(){
// 监听事件,获取a组件的数据,进行相关操作
bus.$on('data-to-b', function (msg) {
this.bdata = msg;
}.bind(this));
}
}; new Vue({
el:'#app',
components: {
'com-a': coma,
'com-b': comb
}
})

Vue组件学习的更多相关文章

  1. vue组件学习(二)

    父子组件之间的数据传递, 父传给子: 直接在组件上传,如:<count :number="2"> (冒号和不要冒号的区别,有冒号会自动转为相应的类型)在名为count的 ...

  2. vue组件学习(一)

    1, vue中的 is 的用法,有时候我们需要把一个组件绑定到指定的标签下,比如把tr组件放到table下,直接这样写是不行的, <!DOCTYPE html> <html lang ...

  3. Vue组件学习(转载)

    什么是组件:组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTM ...

  4. vue学习目录 vue初识 this指向问题 vue组件传值 过滤器 钩子函数 路由 全家桶 脚手架 vuecli element-ui axios bus

    vue学习目录 vue学习目录 Vue学习一之vue初识 Vue学习二之vue结合项目简单使用.this指向问题 Vue学习三之vue组件 Vue学习四之过滤器.钩子函数.路由.全家桶等 Vue学习之 ...

  5. day 83 Vue学习三之vue组件

    本节目录 一 什么是组件 二 v-model双向数据绑定 三 组件基础 四 父子组件传值 五 平行组件传值 六 xxx 七 xxx 八 xxx 一 什么是组件 首先给大家介绍一下组件(componen ...

  6. Vue – 基础学习(2):组件间 通信及参数传递

    Vue – 基础学习(2):组件间 通信及参数传递

  7. Vue.js学习-组件注册与使用

    Vue.js学习文档 地址:https://cn.vuejs.org/v2/guide/ 关于自定义组件注册: 建议将<script></script>放在body标签之后 H ...

  8. 4.VUE前端框架学习记录四:Vue组件化编码2

    VUE前端框架学习记录四:Vue组件化编码2文字信息没办法描述清楚,主要看编码Demo里面,有附带完整的代码下载地址,有需要的同学到脑图里面自取.脑图地址http://naotu.baidu.com/ ...

  9. 3.VUE前端框架学习记录三:Vue组件化编码1

    VUE前端框架学习记录三:Vue组件化编码1文字信息没办法描述清楚,主要看编码Demo里面,有附带完整的代码下载地址,有需要的同学到脑图里面自取.脑图地址http://naotu.baidu.com/ ...

随机推荐

  1. android app性能优化大汇总

    这里根据网络上各位大神已经总结的知识内容做一个大汇总,作为记录,方便后续“温故知新”. 性能指标: (1)使用流畅度:  图片处理器每秒刷新的帧数(FPS),可用来指示页面是否平滑的渲染.高的帧率可以 ...

  2. discuz 数据库文件密码修改

    网站系统需要修改的位置有两处 Discuz 和 UC-center ①路径:/wwwroot/config/config_global.php 这个根据你网站安装的路径而定. 打开 config_gl ...

  3. spring boot 与 自定义interceptor

    前面学习过过滤器, 但是过滤器是针对servlet的, 用在springmvc和spring boot里面, 功能上, 感觉并不是很好用. 那这里来学习一下拦截器. 一. 拦截器的执行顺序 1. 目录 ...

  4. 从Java进程里dump出类的字节码文件

    想要查看一些被增强过的类的字节码,或者一些AOP框架的生成类,就需要dump出运行时的Java进程里的字节码. 从运行的java进程里dump出运行中的类的class文件的方法: 用agent att ...

  5. 厌倦了“正在输入…”的客服对话,是时候pick视频客服了

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由腾讯云视频发表于云+社区专栏 关注公众号"腾讯云视频",一键获取 技术干货 | 优惠活动 | 视频方案 什么?! ...

  6. GCD之后台程序运行

    点击Home键进入后台时进行计时,直到从新启动,超过三分钟启动手势 // // AppDelegate.m // GCDDown // // Created by City--Online on 15 ...

  7. ABP 数据库 -- ABP&EF中的多表、关联查询

    本文介绍一下ABP中的多表查询. 1.创建实体 多表查询,在ABP或者EF中都很简单,这里我们创建一个Demo,一个学生实体.一个学校实体. 学校里面可以有很多学生,学生有一个学校. 实体如下: 学校 ...

  8. [转]csv文件导入Mysql

    本文转自:https://blog.csdn.net/quiet_girl/article/details/71436108 本篇博客主要讲将csv文件导入Mysql的方法(使用命令行). Step1 ...

  9. jQuery找到GridView控件ItemTemplate模版内的控件

    可以使用下面的方法,jQuery找到GridView控件ItemTemplate模版内的CheckBox: 使用jQuery的find()方法:

  10. Mybatis的枚举处理器

    Mybatis有两个默认枚举处理器 EnumOrdinalTypeHandler EnumTypeHandler 自定义枚举 EnumOrdinalTypeHandler 这个处理器负责将pojo里面 ...