Vue组件学习
根据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组件学习的更多相关文章
- vue组件学习(二)
父子组件之间的数据传递, 父传给子: 直接在组件上传,如:<count :number="2"> (冒号和不要冒号的区别,有冒号会自动转为相应的类型)在名为count的 ...
- vue组件学习(一)
1, vue中的 is 的用法,有时候我们需要把一个组件绑定到指定的标签下,比如把tr组件放到table下,直接这样写是不行的, <!DOCTYPE html> <html lang ...
- Vue组件学习(转载)
什么是组件:组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTM ...
- vue学习目录 vue初识 this指向问题 vue组件传值 过滤器 钩子函数 路由 全家桶 脚手架 vuecli element-ui axios bus
vue学习目录 vue学习目录 Vue学习一之vue初识 Vue学习二之vue结合项目简单使用.this指向问题 Vue学习三之vue组件 Vue学习四之过滤器.钩子函数.路由.全家桶等 Vue学习之 ...
- day 83 Vue学习三之vue组件
本节目录 一 什么是组件 二 v-model双向数据绑定 三 组件基础 四 父子组件传值 五 平行组件传值 六 xxx 七 xxx 八 xxx 一 什么是组件 首先给大家介绍一下组件(componen ...
- Vue – 基础学习(2):组件间 通信及参数传递
Vue – 基础学习(2):组件间 通信及参数传递
- Vue.js学习-组件注册与使用
Vue.js学习文档 地址:https://cn.vuejs.org/v2/guide/ 关于自定义组件注册: 建议将<script></script>放在body标签之后 H ...
- 4.VUE前端框架学习记录四:Vue组件化编码2
VUE前端框架学习记录四:Vue组件化编码2文字信息没办法描述清楚,主要看编码Demo里面,有附带完整的代码下载地址,有需要的同学到脑图里面自取.脑图地址http://naotu.baidu.com/ ...
- 3.VUE前端框架学习记录三:Vue组件化编码1
VUE前端框架学习记录三:Vue组件化编码1文字信息没办法描述清楚,主要看编码Demo里面,有附带完整的代码下载地址,有需要的同学到脑图里面自取.脑图地址http://naotu.baidu.com/ ...
随机推荐
- spring mvc 数据格式化
web.xml <web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www. ...
- JavaScript -- Window-Name
-----027-Window-Name.html----- <!DOCTYPE html> <html> <head> <meta http-equiv=& ...
- Java并发编程-synchronized指南
在多线程程序中,同步修饰符用来控制对临界区代码的访问.其中一种方式是用synchronized关键字来保证代码的线程安全性.在Java中,synchronized修饰的代码块或方法不会被多个线程并发访 ...
- Maven Jetty9
<plugins> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactI ...
- java web 答辩总结
今天我们组答辩.在昨天前三个组答辩之后,整理了一些试题. 在这个项目的答辩准备:首先把这个java web这本书大概的看了一遍:对整理的那些试题也把答案整理出来了:针对老师提问频率较高的试题:针对自己 ...
- Spring IOC 源码之ResourceLoader
转载自http://www.blogjava.net/DLevin/archive/2012/12/01/392337.html 在<深入Spring IOC源码之Resource>中已经 ...
- java 正则例子
1.不易开头.结尾:小数:圆角字符 包含数字.字母.圆角字符 不以<br/>开头.结尾,但中间可以存在 小数中的小数点是半角 正则表达式 "^(?!<br/>)(([ ...
- js设计模式总结5
1.同步模块模式 随着页面功能的增加,系统的业务逻辑越来越复杂.多人开发的功能经常耦合在一起.有时分配任务给多人实现的时候,常常因为某一处功能耦合了很多人的代码,出现排队修改的现象,这很不利于团队开发 ...
- vs code 插件收集
名称 简述 Auto Close Tag 自动闭合HTML标签 Auto Import Typescript自动import提示 Auto Rename Tag 修改HTML标签时,自动修改匹配的标签 ...
- ASP.NET开发,从二层至三层,至面向对象 (2)
继续上一篇<ASP.NET开发,从二层至三层,至面向对象>http://www.cnblogs.com/insus/p/3822624.html .我们了解到怎样把自己的程序由二层变为三层 ...