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 相关文章推荐
不错的一个日期输入 动态
Nov 06 Javascript
js判断undefined类型示例代码
Feb 10 Javascript
jQuery选择器简明总结(含用法实例,一目了然)
Apr 25 Javascript
jQuery文字横向滚动效果的实现代码
May 31 Javascript
jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码
Aug 15 Javascript
Wireshark基本介绍和学习TCP三次握手
Aug 15 Javascript
vue.js实现备忘录功能的方法
Jul 10 Javascript
vue中eventbus被多次触发以及踩过的坑
Dec 02 Javascript
微信小程序页面间值传递的两种方法
Nov 26 Javascript
js 计算图片内点个数的示例代码
Apr 04 Javascript
对vuex中store和$store的区别说明
Jul 24 Javascript
js闭包的9个使用场景
Dec 29 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
回答PHPCHINA上的几个问题:URL映射
2007/02/14 PHP
简单的php写入数据库类代码分享
2011/07/26 PHP
详解WordPress中分类函数wp_list_categories的使用
2016/01/04 PHP
PHP截取发动短信内容的方法
2017/07/04 PHP
Laravel实现定时任务的示例代码
2017/08/10 PHP
chrome下jq width()方法取值为0的解决方法
2014/05/26 Javascript
javascript比较两个日期相差天数的方法
2015/07/23 Javascript
浅谈javascript:两种注释,声明变量,定义函数
2016/10/05 Javascript
Vue.js学习之计算属性
2017/01/22 Javascript
Vue2.0表单校验组件vee-validate的使用详解
2017/05/02 Javascript
浅谈JS如何实现真正的对象常量
2017/06/25 Javascript
手把手教你搭建ES6的开发运行环境
2017/07/11 Javascript
详解AngularJS1.x学习directive 中‘&amp; ’‘=’ ‘@’符号的区别使用
2017/08/23 Javascript
基于vue的短信验证码倒计时demo
2017/09/13 Javascript
seajs中最常用的7个功能、配置示例
2017/10/10 Javascript
Vue2.0用户权限控制解决方案
2017/11/29 Javascript
在vue中使用G2图表的示例代码
2019/03/19 Javascript
微信小程序基于Taro的分享图片功能实践详解
2019/07/12 Javascript
Vue中axios拦截器如何单独配置token
2019/12/27 Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
2020/04/15 Javascript
Python天气预报采集器实现代码(网页爬虫)
2012/10/07 Python
在Python中使用全局日志时需要注意的问题
2015/05/06 Python
Python中的sort()方法使用基础教程
2017/01/08 Python
解决django后台样式丢失,css资源加载失败的问题
2019/06/11 Python
python实现简单学生信息管理系统
2020/04/09 Python
matplotlib更改窗口图标的方法示例
2021/02/03 Python
Pyside2中嵌入Matplotlib的绘图的实现
2021/02/22 Python
5分钟实现Canvas鼠标跟随动画背景
2019/11/18 HTML / CSS
Peter Millar官网:美国高档生活服饰品牌
2018/07/02 全球购物
商场促销活动总结
2014/07/10 职场文书
《我爱祖国》演讲稿1000字
2014/09/26 职场文书
领导干部个人整改措施落实情况汇报
2014/10/29 职场文书
邮政营业员岗位职责
2015/04/14 职场文书
军训通讯稿范文
2015/07/18 职场文书
只需要这一行代码就能让python计算速度提高十倍
2021/05/24 Python
Python中的np.argmin()和np.argmax()函数用法
2021/06/02 Python