Vue学习系列 -- 组件通信
Posted 躬匠
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue学习系列 -- 组件通信相关的知识，希望对你有一定的参考价值。
通过上一章节的学习，我们已经知道父子组件之间可通过props进行通信，但在2.x之后的版本，props就变为单向的了：只能由父组件向子组件传值；但在实际的工作中，存在子组件向父组件传值的业务场景；所以，今天我们就来详细学习一下父子组件之间如何进行双向传值。
一、父组件向子组件传值
上面我们已经提到了子组件可以通过props接受父组件的传值，废话少说，实践一把。
子组件通过props里的message、content字段接收父组件传递过来的数值。可以把message、content理解为槽的意思：父组件向指定槽中放数据，子组件从指定槽中取数据。
下面的demo将message、conent与父组件中的data字段进行了bind。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Learning Vue.js</title>
</head>
<body>
<div id="app1">
<div>
<component-demo :message="message" :content="content">
</component-demo>
</div>
</div>
</body>
<!--这里是以CDN引入的方式加载的vue.js-->
<script type="text/javascript" src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
var app = new Vue(
el : "#app1",
components :
"component-demo" :
template: "<div>message<p>content</p></div>",
props : ["message","content"],
data : function ()
return
,
data :
content : "this is content",
message : "this is parents component message"
)
</script>
</html>页面效果如下：
二、子组件向父组件传值
上面我们已经说了，在2.x之后的版本已经不允许通过props向父组件传值了，新的传值方式是通过自定义事件的方式实现的：子组件触发指定的事件时，父组件也可以监听到这个事件，并作出相应的逻辑处理。
废话少说，直接上代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Learning Vue.js</title>
</head>
<body>
<div id="app1">
<p>The num is num</p>
<div>
<component-demo @parentIncr="getTotalNum" @parentDec="getTotalNum">
</component-demo>
</div>
</div>
</body>
<!--这里是以CDN引入的方式加载的vue.js-->
<script type="text/javascript" src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
var app = new Vue(
el : "#app1",
components :
"component-demo" :
template: "<div> " +
" <p @click='Incr'>增加</p>" +
" <p @click='Dec'>减少</p>" +
"</div>",
data : function ()
return
num : 0
,
methods :
Incr : function ()
this.num ++ ;
this.$emit('parentIncr', this.num);
,
Dec : function ()
this.num -- ;
this.$emit('parentDec', this.num);
,
data :
num : 0
,
methods :
getTotalNum : function (num)
this.num = num;
)
</script>
</html>父组件中监听了parentIncr、parentDes两个事件，而子组件通过$emit配置了当发生单击事件时如何“广播”数据。当子组件进行增加、减少时事件便会“冒泡”到父组件并被父组件监听到，最后交给父组件内的getTotalNum方法去处理，最终显示在页面上。
三、总结
- 上面我们只说了父子组件之间的通信，实际场景中还可能有兄弟组件之间的通信，具体如何实现就不在这里阐述了，想要了解的请自行百度；
- 通过
"props down"实现父组件向子组件传值，通过"events up"实现子组件向父组件传值
以上是关于Vue学习系列 -- 组件通信的主要内容，如果未能解决你的问题，请参考以下文章
vue系列---组件通信refisslot插槽mixin混入脚手架使用animate