根据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. spring mvc 数据格式化

    web.xml <web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www. ...

  2. JavaScript -- Window-Name

    -----027-Window-Name.html----- <!DOCTYPE html> <html> <head> <meta http-equiv=& ...

  3. Java并发编程-synchronized指南

    在多线程程序中,同步修饰符用来控制对临界区代码的访问.其中一种方式是用synchronized关键字来保证代码的线程安全性.在Java中,synchronized修饰的代码块或方法不会被多个线程并发访 ...

  4. Maven Jetty9

    <plugins> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactI ...

  5. java web 答辩总结

    今天我们组答辩.在昨天前三个组答辩之后,整理了一些试题. 在这个项目的答辩准备:首先把这个java web这本书大概的看了一遍:对整理的那些试题也把答案整理出来了:针对老师提问频率较高的试题:针对自己 ...

  6. Spring IOC 源码之ResourceLoader

    转载自http://www.blogjava.net/DLevin/archive/2012/12/01/392337.html 在<深入Spring IOC源码之Resource>中已经 ...

  7. java 正则例子

    1.不易开头.结尾:小数:圆角字符 包含数字.字母.圆角字符 不以<br/>开头.结尾,但中间可以存在 小数中的小数点是半角 正则表达式 "^(?!<br/>)(([ ...

  8. js设计模式总结5

    1.同步模块模式 随着页面功能的增加,系统的业务逻辑越来越复杂.多人开发的功能经常耦合在一起.有时分配任务给多人实现的时候,常常因为某一处功能耦合了很多人的代码,出现排队修改的现象,这很不利于团队开发 ...

  9. vs code 插件收集

    名称 简述 Auto Close Tag 自动闭合HTML标签 Auto Import Typescript自动import提示 Auto Rename Tag 修改HTML标签时,自动修改匹配的标签 ...

  10. ASP.NET开发,从二层至三层,至面向对象 (2)

    继续上一篇<ASP.NET开发,从二层至三层,至面向对象>http://www.cnblogs.com/insus/p/3822624.html .我们了解到怎样把自己的程序由二层变为三层 ...