Vue.js 父子组件通讯开发实例


Posted in Javascript onSeptember 06, 2016

vue.js,是一个构建数据驱动的 web 界面的库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。(这是官方的一个解释!)

小编没使用过angularjs,也没使用过react.js,不能详细的说明三者的区别,想了解的话,在官方有一个分析,请点这里查看

小编从业前端开发也有了一年多的时间,刚开始的时候,前端开发展现的技术太多,小编有心无力,兼顾不过来,经过了解之后,还是选择了学原生js基础兼并jquery的学习上路。小编使用vue.js,也是因为业务的需求,为什么不选择angularjs,其实就是同时不能抛弃jquery,vue.js和jquery可以完美的兼容,因为这个项目,小编也是苦逼了好长一段时间,不断的加班和学习,避免项目的开发时间增加,废话不多说,下面开始一些小编的vue的学习总结,写得不好,也不要见怪哈,写文一直是我的短板。。。。

父链 小编这里,就是vue的实例,作为父链

子组件可以通过 this.parent它的父亲组件。根实例的可以使用this.root 访问它。父有一个数组 this.children,它所有元素;当然,在项目中,我们的组件不可以只有一个或者两个,当组件多了的时候,我们是难以记得children中该组件的位置的,我们可以利用 v-ref 的指令,给我们的组件建立一个钩子,这个钩子,就是我们的其他组件访问该组件时的索引

//这是我的一个组件
<msg v-ref:msgs></msg> //这时候,我们就为这个msg组件建立了一个msgs的索引
//我们可以这样访问组件
var vm = new Vue({}); 
var children = vm.$refs.msgs //通过这种方式访问我们的子组件
//v-ref是一个数组或对象,是我们建立所有ref钩子的组件的集合

这里,给大家看一张图,看一下parent,children, $refs相关的内容(好像图片有点模糊,不会整动态图,尴尬了,看得不清楚,大家可以自己建立一个demo打印出来好好!)

Vue.js 父子组件通讯开发实例

尽管我们可以这样直接访问整个实例里面的组件,但是不建议如此,因为子组件直接修改父组件的状态,是非常糟糕的,这会让父子组件紧密地耦合,理想的情况下,每个组件只能修改自己本身的状态,因为每个组件的作用域都是独立的;

这种情况下,vue也为我们带来了它们的自定义事件

使用 $dispatch() 派发事件,事件沿着父链冒泡;

使用 $broadcast() 广播事件,事件向下传导给所有的后代。

看起来,有点抽象,来个例子,就好理解很多了

//$dispatch()冒泡案例
<!-- 实例 -->
<div id="app">
<!-- 组件通讯一 -->
<section> 
<div class="mas-arry">
<label for="">msg的数据:</label>{{ msg }} 
</div>
<!--子组件 -->
<msg></msg>
</section>
</div>
<template id="msg">
<div class="inp">
<input type="text" v-model="msg">
<a href="javascript:;" @click="add_data">添加</a>
</div>
</template>
<script>
Vue.component('msg',{ //这里直接使用了注册组件的语法糖的方式注册,简单快捷
template: '#msg',
data: function() {
return {
msg : 'abc' 
}
},
methods: {
add_data: function(){ //当点击这个事件的时候,就会触发$dispatch()方法;add_msg是父组件创建的监听子组件的方法,意思就是,告诉父组件的这个方法,老爸,我更新数据了,par_msg就是我更新的数据,你也快更新吧!把par_msg 的数据传给父组件更新!
var par_msg = this.msg.trim();
// this.$parent.add(par_msg); //此方式是直接操作父组件的方法
this.$dispatch('add_msg', par_msg); //此方法是利用事件传播的方式
this.msg = '';
}
}
});
var mvvm = new Vue({
el: '#app',
data: {
msg : ['sgsg']
},
events: { // 创建监听相应响应子组件的事件
'add_msg': function(msg){ // add_msg 是用来监听子组件的方法,当接受到子组件的通知的时候,就把子组件更新的数据更新,这里的msg就是子组件的par_msg
this.msg.push(msg);
}
},
methods: {
add: function(msg){
this.msg.push(msg);
}
}
});
</script>

看完这段代码,相信大家都知道$dispatch()的冒泡的用法了,其实,就是这么点东西,里面有两个参数,第一个参数,就是父组件监听子组件events对象里面的一个方法名,两者要一致;第二个参数,就是子组件更新的数据,同时也是传递给给父组件要同步更新的数据,然后父组件就用这个参数来进行相应的操作

//$broadcast()方法的用法和$dispatch()的用法是一样的,不一样的是,event对象是在子组件里面创建,相反触发的函数在父组件;这里要说的是,如果子组件的数据完全依赖于父组件的数据,那么,则不需要用通说事件传递的方式,只需要通过props获取父组件的数据,绑定到子组件身上就可以了

<!-- 组件通讯二 $broadcast()方法 -->
<section class="sec">
<h3>父组件添加的数据源:</h3>
<div class="box clearfix">
<label for="" class="box-left">id:</label>
<div class="bor-right">
<input type="text" v-model="id">
</div>
</div>
<div class="box clearfix">
<label for="" class="box-left">姓名:</label>
<div class="bor-right">
<input type="text" v-model="name">
</div>
</div>
<div class="box clearfix">
<label for="" class="box-left">爱好:</label>
<div class="bor-right">
<input type="text" v-model="inst">
</div>
</div>
<div class="box clearfix">
<label for="" class="box-left"> </label>
<div class="bor-right">
<a href="javascrip:;" @click="add_table">添加</a>
</div>
</div>
<h3>下面的表格是子组件信息:</h3>
<!-- 把父组件的table_data数据绑定到子组件上 -->
<broadcase :data="table_data"></broadcase>
</section>
<template id="broadcase">
<div class="table">
<table>
<thead>
<tr>
<th>id</th>
<th>姓名</th>
<th>爱好</th>
</tr>
</thead>
<tbody>
<tr v-for="list in data">
<td>{{ list.id }}</td>
<td>{{ list.name }}</td>
<td>{{ list.inst }}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
Vue.component('broadcase',{ //这里直接使用了注册组件的语法糖的方式注册,简单快捷
template: '#broadcase',
props: ['data'], // props是用来接受父组件的传递参数,也可在里面自定义数据,如果数据需要有默认值的话,需在data里面定义
data: function() {
return {
msg : 'abc' 
}
},
events : { //这里只是个例子,子组件监听父组件的数据变化
test : function(msg){
console.log(msg);
}
},
methods: {
}
});
var mvvm = new Vue({
el: '#app',
data: {
table_data: [
{
id: 1,
name: 'gjei',
inst: 'gjweir'
},{
id: 2,
name: 'jiuyer',
inst: 'oiuyt'
}
] 
},
methods: {
add_table: function(){
var set = {
id: this.id,
name: this.name,
inst : this.inst
};
this.table_data.push(set);
// this.$broadcast('test', set); //这里,只是一个例子语法
this.id = '';
this.name = '';
this.inst = '';
}
}
});
</script>

上处举的两个例子,都可以点击这里测试,文件已经上传个人空间 vue父子组件通讯demo

当写到这里的时候,回头看了一下,自己写的内容,貌似写得有点乱,真是汗颜啊!很久之前就想过写博客,建立自己的笔记库,只是以前尝试写的时候,真是无法下手如何去写,最近,下定决心,不管写的怎么样,也坚持去写,万一哪天自己的文笔突然变得好起来了呢!

vue父子组件通讯,其实应用并不是很难,它其实也是提供了相应的api接口监听,实际的项目应用该如何操作变化,还是得需要我们自己写,重点,还是得要提高我们的js水平,毕竟,复杂的web应用越来越多!希望,喜欢前端的同学们都能在js的路上共勉.

Javascript 相关文章推荐
js打印纸函数代码(递归)
Jun 18 Javascript
Wordpress ThickBox 添加“查看原图”效果代码
Dec 11 Javascript
jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)
May 23 Javascript
获取select元素被选中的文本内容的js代码
Jan 29 Javascript
JQuery自适应窗口大小导航菜单附源码下载
Sep 01 Javascript
jQuery实现可用于博客的动态滑动菜单完整实例
Sep 17 Javascript
详解jQuery移动页面开发中的ui-grid网格布局使用
Dec 03 Javascript
bootstrapValidator表单验证插件学习
Dec 30 Javascript
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
May 20 jQuery
JS实现无缝循环marquee滚动效果
May 22 Javascript
react-router4 配合webpack require.ensure 实现异步加载的示例
Jan 18 Javascript
Angular 数据请求的实现方法
May 07 Javascript
Vuejs第十篇之vuejs父子组件通信
Sep 06 #Javascript
Vue.js每天必学之方法与事件处理器
Sep 06 #Javascript
基于JavaScript实现购物网站商品放大镜效果
Sep 06 #Javascript
AngularGauge 属性解析详解
Sep 06 #Javascript
AngularJS 面试题集锦
Sep 06 #Javascript
BootStrap glyphicon图标无法显示的解决方法
Sep 06 #Javascript
JS原型链 详解及示例代码
Sep 06 #Javascript
You might like
php array_push()数组函数:将一个或多个单元压入数组的末尾(入栈)
2011/07/12 PHP
php获取301跳转URL简单实例
2013/12/16 PHP
CSDN轮换广告图片轮换效果
2007/03/27 Javascript
面向对象的javascript(笔记)
2009/10/06 Javascript
CheckBoxList多选样式jquery、C#获取选择项
2013/09/06 Javascript
Javascript之Math对象详解
2016/06/07 Javascript
JavaScript学习笔记整理_setTimeout的应用
2016/09/19 Javascript
Bootstrap模态框调用功能实现方法
2016/09/19 Javascript
javascript 动态脚本添加的简单方法
2016/10/11 Javascript
vue2.0+webpack环境的构造过程
2016/11/08 Javascript
JS判断微信扫码的方法
2017/08/07 Javascript
JS中常用的消息框总结
2018/02/24 Javascript
手写简单的jQuery雪花飘落效果实例
2018/04/22 jQuery
解决vue attr取不到属性值的问题
2018/09/18 Javascript
WebSocket的简单介绍及应用
2019/05/23 Javascript
解决Vue动态加载本地图片问题
2019/10/09 Javascript
vue输入节流,避免实时请求接口的实例代码
2019/10/30 Javascript
javascript实现时钟动画
2020/12/03 Javascript
python求素数示例分享
2014/02/16 Python
Django的HttpRequest和HttpResponse对象详解
2018/01/26 Python
Python实现的读写json文件功能示例
2018/06/05 Python
使用 Python 实现微信群友统计器的思路详解
2018/09/26 Python
在python里协程使用同步锁Lock的实例
2019/02/19 Python
matplotlib源码解析标题实现(窗口标题,标题,子图标题不同之间的差异)
2021/02/22 Python
使用html5 canvas 画时钟代码实例分享
2015/11/11 HTML / CSS
英国当代时尚和街头服饰店:18montrose
2018/12/15 全球购物
什么是网络协议
2016/04/07 面试题
表扬信格式
2014/01/12 职场文书
装修设计师求职信
2014/02/26 职场文书
减负增效提质方案
2014/05/23 职场文书
拓展训练激励口号
2014/06/17 职场文书
2014年优秀班主任工作总结
2014/12/16 职场文书
2015年共青团工作总结
2015/05/15 职场文书
大学生社会服务心得体会
2016/01/22 职场文书
乡镇干部学习心得体会
2016/01/23 职场文书
Python基于百度AI实现抓取表情包
2021/06/27 Python