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 相关文章推荐
网页javascript精华代码集
Jan 24 Javascript
js电信网通双线自动选择技巧
Nov 18 Javascript
解析Jquery取得iframe中元素的几种方法
Jul 04 Javascript
jquery禁用右键示例
Apr 28 Javascript
JS实现文件动态顺序载入的方法
Mar 07 Javascript
基于vue2.0实现的级联选择器
Jun 09 Javascript
node.js中TCP Socket多进程间的消息推送示例详解
Jul 10 Javascript
Vue.js 使用v-cloak后仍显示变量的解决方法
Nov 19 Javascript
玩转Koa之核心原理分析
Dec 29 Javascript
jquery.tagsinput.js实现记录checkbox勾选的顺序
Sep 21 jQuery
vue data引入本地图片的两种方式小结
Nov 13 Javascript
vue实现多个echarts根据屏幕大小变化而变化实例
Jul 19 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下通过exec获得计算机的唯一标识[CPU,网卡 MAC地址]
2011/06/09 PHP
真正根据utf8编码的规律来进行截取字符串的函数(utf8版sub_str )
2012/10/24 PHP
PHP学习笔记(二) 了解PHP的基本语法以及目录结构
2014/08/04 PHP
PHP 极验验证码实例讲解
2016/09/29 PHP
Jquery 设置标题的自动翻转
2009/10/03 Javascript
Node.js中使用计时器定时执行函数详解
2014/08/15 Javascript
Javascript中的默认参数详解
2014/10/22 Javascript
浅谈Javascript实现继承的方法
2015/07/06 Javascript
js实现数组冒泡排序、快速排序原理
2016/03/08 Javascript
JS加载器如何动态加载外部js文件
2016/05/26 Javascript
Vue.js双向绑定操作技巧(初级入门)
2016/12/27 Javascript
jquery 校验中国身份证号码实例详解
2017/04/11 jQuery
利用webstrom调试Vue.js单页面程序的方法教程
2017/06/06 Javascript
EasyUI的DataGrid绑定Json数据源的示例代码
2017/12/16 Javascript
vue-cli webpack 引入jquery的方法
2018/01/10 jQuery
分享JS表单验证源码(带错误提示及密码等级)
2020/01/05 Javascript
解决vue-router 切换tab标签关闭时缓存问题
2020/07/22 Javascript
vue+Element-ui实现分页效果
2020/11/15 Javascript
OpenCV实现人脸识别
2017/04/07 Python
python使用Matplotlib画饼图
2018/09/25 Python
pycharm执行python时,填写参数的方法
2018/10/29 Python
从运行效率与开发效率比较Python和C++
2018/12/14 Python
解决django FileFIELD的编码问题
2020/03/30 Python
Python xlwt模块使用代码实例
2020/06/10 Python
实例讲解CSS3中的border-radius属性
2015/08/18 HTML / CSS
CSS3实现淘宝留白的方法
2020/06/05 HTML / CSS
Tuckernuck官网:经典的美国品质服装、鞋子和配饰
2021/01/11 全球购物
如何做好总经理助理
2013/11/12 职场文书
法学函授自我鉴定
2014/02/06 职场文书
新年爱情寄语
2014/04/08 职场文书
汉语言文学专业求职信
2014/06/19 职场文书
个人整改措施落实情况汇报
2014/10/29 职场文书
员工拾金不昧表扬稿
2015/05/05 职场文书
讲座新闻稿
2015/07/18 职场文书
2016年五一劳动节专题校园广播稿
2015/12/17 职场文书
GoLang中生成UUID唯一标识的实现
2021/05/08 Golang