Vuejs第十篇之vuejs父子组件通信


Posted in Javascript onSeptember 06, 2016

本篇文章是小编结合官方文档整理的一套更加细致,代码更多更全的教程,非常不错,比较适合新手阅读。

本篇资料来于官方文档:

http://cn.vuejs.org/guide/components.html#u7236_u5B50_u7EC4_u4EF6_u901A_u4FE1

父子组件通信

①访问子组件、父组件、根组件;

this.$parent 访问父组件

this.$children 访问子组件(是一个数组)

this.$root 根实例的后代访问根实例

示例代码:

<div id="app"> 
父组件: 
<input v-model="val"><br/> 
子组件: 
<test :test="val"></test> 
</div> 
<script> 
var vm = new Vue({ 
el: '#app', 
data: { 
val: 1 
}, 
components: { 
test: { 
props: ['test'], 
template: "<input @keyup='findParent' v-model='test'/>", 
methods: { 
findParent: function () { 
console.log(this.$parent); //访问根组件 
console.log(this.$parent.val); //访问根组件的val属性 
console.log(this.$parent.$children.indexOf(this)); //查看当前能否在其父组件的子组件中找到索引 
console.log(this.$parent === this.$root); //查看父组件和根组件是不是全等的(因为他的父组件就是根组件) 
} 
} 
} 
} 
}); 
</script>

当在子组件的输入框按键弹起时,显示内容依次为:

父组件、父组件的输入框的值(默认情况是1)、0(表示是父组件的children属性中的第一个元素)、true(由于父组件就是根组件,所以是全等的);

通过这样的方法,可以在组件树中进行互动。

②自定义事件:

首先,事件需要放置在events属性之中,而不是放置在methods属性中(新手很容易犯的错误),只能触发events属性中的事件,而methods属性中的事件是无法触发的。

其次,向上派发和向下广播有所区别:向上派发会触发自身同名事件,而向下广播不会;

第三,向上派发和向下广播默认只会触发直系(子或者父,不包括祖先和孙)的事件,除非事件返回值为true,才会继续在这一条线上继续。

第四,事件不能显式的通过 this.事件名 来调用它。

示例代码:

<div id="app"> 
父组件: 
<button @click="parentClick">点击向下传播broadcast</button> 
<br/> 
子组件1: 
<children1></children1> 
<br/> 
另一个子组件1: 
<another-children1></another-children1> 
</div> 
<script> 
var vm = new Vue({ 
el: '#app', 
data: { 
val: 1 
}, 
methods: { 
parentClick: function () { 
this.$broadcast("parentClick", "abc"); 
} 
}, 
events: { 
childrenClick: function () { 
console.log("childrenClick-Parent"); 
}, 
parentClick: function () { 
console.log("parentClick-Parent"); 
return true; 
} 
}, 
components: { 
children1: { //这个无返回值,不会继续派发 
props: ['test'], 
template: "<button>children1</button></br>子组件2:<children2></children2>", 
events: { 
childrenClick: function () { 
console.log("childrenClick-children1"); 
}, 
parentClick: function (msg) { 
console.log("parentClick-Children1"); 
console.log("message:" + msg); 
} 
}, 
components: { 
children2: { 
props: ['test'], 
template: "<button @click='findParent'>children-Click</button>", 
methods: { 
findParent: function () { 
this.$dispatch('childrenClick'); 
} 
}, 
events: { 
childrenClick: function () { 
console.log("childrenClick-children2"); 
}, 
parentClick: function (msg) { 
console.log("parentClick-Children2"); 
console.log("message:" + msg); 
} 
} 
} 
} 
}, 
anotherChildren1: { //这个是返回值为true,会继续向子组件的子组件派发 
props: ['test'], 
template: "<button>anotherChildren1</button></br>另一个子组件2:<another-children2></another-children2>", 
events: { 
childrenClick: function () { 
console.log("childrenClick-anotherChildren1"); 
return true; 
}, 
parentClick: function (msg) { 
console.log("parentClick-anotherChildren1"); 
console.log("message:" + msg); 
return true; 
} 
}, 
components: { 
anotherChildren2: { 
props: ['test'], 
template: "<button @click='findParent'>anotherChildren2-Click</button>", 
methods: { 
findParent: function () { 
this.$dispatch('childrenClick'); 
} 
}, 
events: { 
childrenClick: function () { 
console.log("childrenClick-anotherChildren2"); 
}, 
parentClick: function (msg) { 
console.log("parentClick-anotherChildren2"); 
console.log("message:" + msg); 
} 
} 
} 
} 
} 

} 
}); 
</script> 
}, 
parentClick: function () { 
console.log("parentClick-anotherChildren2"); 
} 
} 
} 
} 
} 

} 
}); 
</script>

说明:

【1】点击父组件的按钮,会向下广播,然后触发子组件1本身,另外一个子组件1,以及另一个子组件2;

【2】点击子组件2的按钮,会触发子组件2的事件和子组件1的事件,但不会触发父组件的按钮;

【3】点击另一个子组件2的按钮,会触发另一个子组件2的事件,另一个子组件1的事件和父组件的事件(因为另一个子组件1的事件的返回值为true);

③使用v-on绑定自定义事件:

【1】简单来说,子组件触发某个事件(events里的方法)时,父组件也会执行某个方法(父组件methods里的方法)。

【2】触发的绑定写在模板之中(即被替换的那个template模板中),可以多个子组件的事件绑定一个父组件的方法,或者不同子组件的事情绑定不同父组件的方法,但是不能同一个子组件事件绑定多个父组件的方法。

【3】子组件派发消息传递的参数,即使子组件的事件没有参数,也不影响将参数传递给父组件的方法(即父组件的方法可以接受到子组件方法获取的参数)

如示例:

<div id="app"> 
父组件: 
<button>点击向下传播broadcast</button> 
<br/> 
子组件1: 
<!--绑定写在这里,可以多个绑定同一个,或者不同绑定不同的,但不能一个绑定多个--> 
<children v-on:test="parent" @test2="another"></children> 
</div> 
<script> 
var vm = new Vue({ 
el: '#app', 
data: { 
val: 1 
}, 
methods: { 
parent: function (arg) { 
console.log(arg); 
console.log("the first method with test event"); 
}, 
another: function () { 
console.log("another method"); 
} 
}, 
components: { 
children: { //这个无返回值,不会继续派发 
props: ['test'], 
template: "<button @click='childClick'>children1</button></br><button @click='childClick2'>children1</button>", 
methods: { 
childClick: function () { 
this.$emit("test", 'the argument for dispatch'); 
}, 
childClick2: function () { 
this.$emit("test2"); 
} 
}, 
events: { 
test: function () { 
console.log("test"); 
}, 
test2: function () { 
console.log("test2"); 
} 
} 
} 
} 
}); 
</script>

④子组件索引

简单来说:就是可以直接从索引获取到子组件,然后就可以调用各个子组件的方法了。

添加索引方法是:在标签里添加v-ref:索引名

调用组件方法是:vm.$ref.索引名

也可以直接在父组件中使用this.$ref.索引名

这个时候,就可以获得组件了,然后通过组件可以调用他的方法,或者是使用其数据。

示例代码:

<div id="app"> 
父组件: 
<button @click="todo">触发子组件的事件</button> 
<br/> 
子组件1: 
<!--绑定写在这里,可以多个绑定同一个,或者不同绑定不同的,但不能一个绑定多个--> 
<children v-ref:child></children> 
</div> 
<script> 
var vm = new Vue({ 
el: '#app', 
methods: { 
todo: function () { 
this.$refs.child.fromParent(); //通过索引调用子组件的fromParent方法 
} 
}, 
components: { 
children: { //这个无返回值,不会继续派发 
props: ['test'], 
template: "<button>children1</button>", 
methods: { 
fromParent: function () { 
console.log("happened fromParent by ref"); 
} 
} 
} 
} 
}); 
</script>

以上所述是小编给大家介绍的Vuejs第十篇之vuejs父子组件通信,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery实现select选中行、列合计示例
Apr 25 Javascript
Javascript+CSS实现影像卷帘效果思路及代码
Oct 20 Javascript
JavaScript操作XML文件之XML读取方法
Jun 09 Javascript
AngularJS上拉加载问题解决方法
May 23 Javascript
js获取一组日期中最近连续的天数
May 25 Javascript
JS 组件系列之BootstrapTable的treegrid功能
Jun 16 Javascript
vue如何判断dom的class
Apr 26 Javascript
layer弹出的iframe层在执行完毕后关闭当前弹出层的方法
Aug 17 Javascript
解决使用bootstrap的dropdown部件时报错:error:Bootstrap dropdown require Popper.js问题
Aug 30 Javascript
Vue利用localStorage本地缓存使页面刷新验证码不清零功能的实现
Sep 04 Javascript
vue实现lodop打印功能的示例
Nov 11 Javascript
JavaScript利用html5新方法操作元素类名详解
Nov 27 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
JavaScript中push(),join() 函数 实例详解
Sep 06 #Javascript
You might like
PHP和Mysqlweb应用开发核心技术 第1部分 Php基础-1 开始了解php
2011/07/03 PHP
PHP 面向对象程序设计(oop)学习笔记 (五) - PHP 命名空间
2014/06/12 PHP
php操纵mysqli数据库的实现方法
2016/09/18 PHP
PHP+AjaxForm异步带进度条上传文件实例代码
2017/08/14 PHP
PHP命名空间定义与用法实例分析
2019/08/14 PHP
php抽象方法和普通方法的区别点总结
2019/10/13 PHP
根据身份证号自动输出相关信息(籍贯,出身日期,性别)
2013/11/15 Javascript
js 剪切板的用法(clipboardData.setData)与js match函数介绍
2013/11/19 Javascript
jQuery(js)获取文字宽度(显示长度)示例代码
2013/12/31 Javascript
js获得网页背景色和字体色的方法
2014/03/21 Javascript
js 设置缓存及获取设置的缓存
2014/05/08 Javascript
jQuery 计算iframe 窗口大小的方法
2014/05/13 Javascript
JavaScript字符串对象substr方法入门实例(用于截取字符串)
2014/10/16 Javascript
深入理解JavaScript系列(41):设计模式之模板方法详解
2015/03/04 Javascript
Angularjs中使用Filters详解
2016/03/11 Javascript
Avalon中文长字符截取、关键字符隐藏、自定义过滤器
2016/05/18 Javascript
js实现图片加载淡入淡出效果
2017/04/07 Javascript
用node和express连接mysql实现登录注册的实现代码
2017/07/05 Javascript
React如何将组件渲染到指定DOM节点详解
2017/09/08 Javascript
vue项目常用组件和框架结构介绍
2017/12/24 Javascript
Vue 将后台传过来的带html字段的字符串转换为 HTML
2018/03/29 Javascript
Vue头像处理方案小结
2018/07/26 Javascript
vue-cli项目无法用本机IP访问的解决方法
2018/09/20 Javascript
Python实现根据IP地址和子网掩码算出网段的方法
2015/07/30 Python
python数据批量写入ScrolledText的优化方法
2018/10/11 Python
在python image 中实现安装中文字体
2020/05/16 Python
python抢购软件/插件/脚本附完整源码
2021/03/04 Python
Brookstone美国官网:独特新奇产品
2017/03/04 全球购物
卡骆驰德国官方网站:Crocs德国
2019/03/29 全球购物
Dr. Martens马汀博士德国官网:马丁靴鼻祖
2019/12/26 全球购物
SNIDEL官网:日本VIVI杂志人气少女第一品牌
2020/03/12 全球购物
Shopbop中文官网:美国亚马逊旗下时尚购物网站
2020/12/15 全球购物
JPA面试常见问题
2016/11/14 面试题
一份Java笔试题
2012/02/21 面试题
电影地道战观后感
2015/06/04 职场文书
小学远程教育工作总结
2015/08/13 职场文书