vue之父子组件之间的通信方式
（一）props与$emit
<!-这部分是一个关于父子组件之间参数传递的例子-->
<!--父组件传递参数到子组件是props，子组件传递参数到父组件是用事件触发$emit-->
<!OCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<sccipt src="js/vue.js" type="text/javascript"></script>
</head>
<body>
<div id="parent">
<input type="text" v-model="parentMassage" />{{parentMassage}}
</br>
<!--child组件注意点：1.props属性前面加v-bind或者：的时候就变成了动态绑定父组件的值，比如parent-send，绑定的元素只能是小写或者是连短线形式的，这个在子组件的props数组里改成驼峰式的，如果是传递的大小写混合则就传递不了参数了。
2.childmessage传递的参数不要加括号，比如childmessage(data)，这个在父组件的函数中获取不到子组件传递的值。-->
</div>
<script>
var child={
template:'<button @click="add" >局部组件:{{childMessage}}</button>',
props:['parentSend'],
data:function(){//子组件中的数据都是以函数返回形式的
return{
childMessage:this.parentSend
}
},
methods:{
add:function(){
var _self=this;
_self.childMessage++;
_self.sendToParent();
},
sendToParent:function(){
debugger
this.$emit('child-message',1);//这里的this是子组件button
}
}
}; var vue=new Vue({
el:"parent",
data:{
parentMassage:111
},
methods:{
childmessage:function(data){
debugger
var _self=this;
_self.parentMessage+=data;//子组件传递来的那个参数值1
}
},
components:{
"child":child
}//注册子组件 })
</script>
</body>
</html>
(二)$emit与$on
var Event = new Vue(); 相当于又new了一个vue实例，Event中含有vue的全部方法；
Event.$emit('msg',this.msg); 发送数据，第一个参数是发送数据的名称，接收时还用这个名字接收，第二个参数是这个数据现在的位置；
Event.$on('msg',function(msg){ 接收数据，第一个参数是数据的名字，与发送时的名字对应，第二个参数是一个方法，要对数据的操作
/这里是对数据的操作
})
例：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title>孙三峰--博客园</title>
6 <script type="text/javascript" src="js/vue2.0.3.js" ></script>
7 <script type="text/javascript">
8 //准备一个空的实例对象
9 var Event = new Vue();
10 var A={
11 template:`
12 <div style="border: 1px solid red; margin-bottom: 10px； width: 300px;">
13 <h4>A组件</h4>
14 <p>{{a}}</p>
15 <input type="button" value="把A数据给C" @click="send" />
16 </div>
17 `,
18 data(){
19 return {
20 a:'我是A里面的数据'
21 }
22 },
23 methods:{
24 send(){ //A发送数据
25 Event.$emit('a-msg',this.a);
26 }
27 }
28 };
29 var B={
30 template:`
31 <div style="border: 1px solid green; margin-bottom: 10px； width: 300px;">
32 <h4>B组件</h4>
33 <p>{{b}}</p>
34 <input type="button" value="把B数据给C" @click="send" />
35 </div>
36 `,
37 data(){
38 return {
39 b:'我是B里面的数据'
40 }
41 },
42 methods:{
43 send(){
44 Event.$emit('b-msg',this.b);
45 }
46 }
47 };
48 var C={
49 template:`
50 <div style="border: 1px dotted green; margin-bottom: 10px；width: 300px;">
51 <h4>我是C组件,我在坐等接收数据</h4>
52 <p>{{a}}</p>
53 <p>{{b}}</p>
54 </div>
55 `,
56 data(){
57 return{
58 a:'',
59 b:''
60 }
61 },
62 mounted(){ //两种接收的方式
63 var _this = this;
64 Event.$on('a-msg',function(a){
65 _this.a=a;
66 });
67 Event.$on('b-msg',function(b){
68 this.b = b;
69 }.bind(this))
70 }
71 };
72 window.onload=function(){
73 new Vue({
74 el:'#box',
75 data:{
76
77 },
78 components:{
79 'com-a':A,
80 'com-b':B,
81 'com-c':C
82 }
83 })
84 }
85 </script>
86 </head>
87 <body>
88 <div id="box">
89 <com-a></com-a>
90 <com-b></com-b>
91 <com-c></com-c>
92 </div>
93 </body>
94 </html>
效果图：
说说(一)中遇到的坑，就是那个$emit总是触发不了的问题，用$emit 实现子组件向父组件传值 报fnsapply is not a function错误，解决方法：
解决方案1:
一样的报错，我是父组件传给子组件
解决方案2:
v-on:tatseSure="sure"应该这样写：v-on:tatse-sure="sure"或者@tatse-sure="sure",$emit中也改确保
sure是定义在父组件methods中的函数
解决方案3:
是方法的命名冲突了 所以导致了这个问题。
最后顺便说下变量监控函数$watch:
vm.$watch('a', function (newVal, oldVal) {
// 做点什么
})
vue之父子组件之间的通信方式的更多相关文章
- 【Vue课堂】Vue.js 父子组件之间通信的十种方式
这篇文章介绍了Vue.js 父子组件之间通信的十种方式,不管是初学者还是已经在用 Vue 的开发者都会有所收获.无可否认,现在无论大厂还是小厂都已经用上了 Vue.js 框架,简单易上手不说,教程详尽 ...
- Vue(基础四)_总结五种父子组件之间的通信方式
一.前言 这篇文章主要总结了几种通信方式: 1.方式一:使用props: [ ]和$emit() (适用于单层通信) 2.方式二:$attrs和$listeners(适用于多层) 3.方式三:中央处 ...
- Vue.js 父子组件之间通信的方式
Vue 父子组件之间的同学有一下几种方式: 1. props 2. $emit -- 组件封装用的比较多 3. .sync -- 语法糖 4. $attrs 和 $listeners -- 组件封装用 ...
- vue中父子组件之间的传值、非父子组件之间的传值
在Vue实例中每个组件之间都是相互独立的,都有自己的作用域,所以组件之间是不能直接获取数据.在项目开发中一个组件可能需要获取另一个组件的值,我们可以通过其他方法间接的获取.所以,获取的方法有以下几种: ...
- vue 非父子组件之间的传值（Bus/总线/发布订阅模式/观察者模式）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- vue 中父子组件之间的交互
1,最直接的也是最简单的方法是利用props来数据传值. 子组件定义如下: props: { iconClass: { type: String, required: true }, classNam ...
- vue非父子组件之间的通信
https://www.cnblogs.com/chengduxiaoc/p/7099552.html //vm.$emit( event, arg ) //触发当前实例上的事件 //vm.$on ...
- 「Vue」父子组件之间的传值及调用方法
a.父组件向子组件传值data(){},props数据区别data中的数据可读可写,是自己的数据props是个数组,中的数据是父组件传递过来的,只读不能写<login :dmsg='msg'&g ...
- Vue非父子组件之间的传值
1.新建一个js文件 然后引入vue 实例化vue 最后暴露这个实例:实例化Vue对象的时候名称要小写,大写控制台报错,我也不知道什么原因: 2.在要广播的地方引入刚才定义的实例: 3通过VueEm ...
随机推荐
- python学习（day2）
1.常用数据类型及内置方法 1.列表(list) 定义:在中括号[]内存放任意多个值,用逗号隔开. 具体函数和内置方法如下: #定义学生列表,可存放多个学生 students=['a','b','c' ...
- scrapy 请求传参
class MovieSpider(scrapy.Spider): name = 'movie' allowed_domains = ['www.id97.com'] start_urls = ['h ...
- chpasswd - 成批更新用户的口令
总览 chpasswd [-e] 描述 chpasswd 从系统的标准输入读入用户的名称和口令,并利用这些信息来更新系统上已存在的用户的口令.在没有用 -e 这个开关选项的情况下,口令将按明文的形式接 ...
- CAD设置超链接（网页版）
超链接(Hyperlink)可以看做是一个“热点”,它可以从当前Web页定义的位置跳转到其他位置. 设置对象动态提示事件回调函数. //设置对象动态提示事件回调函数 function DoInputP ...
- ubuntu12.04 配置apache+modwsgi+django1.5
1.首先下载modwsgi 链接如下: http://files.cnblogs.com/baoyiluo/mod_wsgi-3.4.zip 2.解压并安装mod_wsgi: ./configure ...
- 09Windows编程
Windows编程 2.1 窗口 Windows应用程序一般都有一个窗口,窗口是运行程序与外界交换信息的界面.一个典型的窗口包括标题栏.最小化按钮.最大/还原按钮.关闭按钮.系统菜单图标.菜 ...
- HTML5 history API与ajax分页实例页面
<ul id="choMenu" class="rel cho_menu"> <li><a href="ajax.php ...
- BZOJ 2502 Luogu P4843 清理雪道 最小流
题意: 滑雪场坐落在FJ省西北部的若干座山上. 从空中鸟瞰,滑雪场可以看作一个有向无环图,每条弧代表一个斜坡(即雪道),弧的方向代表斜坡下降的方向. 你的团队负责每周定时清理雪道.你们拥有一架直升飞机 ...
- 关于C/C++的一些思考（2）
C++引入类机制的目的: 从语法上将数据和操作捆绑在一起: 从语法上消除变量和函数的名字冲突: 从语法上允许服务端设计者控制数据和函数的访问权限: 从工程上支持数据封装.信息隐藏.将责任推向服务端.减 ...
- [Python3网络爬虫开发实战] 4-解析库的使用
上一章中,我们实现了一个最基本的爬虫,但提取页面信息时使用的是正则表达式,这还是比较烦琐,而且万一有地方写错了,可能导致匹配失败,所以使用正则表达式提取页面信息多多少少还是有些不方便. 对于网页的节点 ...