频道栏目
首页 > 程序开发 > web前端 > JavaScript > 正文
Vuejs组件——父子组件通信解析
2018-03-01 17:28:59         来源:qq20004604的博客  
收藏   我要投稿

Vuejs组件——父子组件通信解析。

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

this.$parent 访问父组件

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

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

示例代码:

父组件:

子组件:

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

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

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

②自定义事件:

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

事件说明

$on(事件名)事件名的类型是字符串(下同),调用它可以通过this.$on()来调用;

$emit(事件名, 参数)用于触发事件,参数是用于传递给事件的参数。这个用于触发同级事件(当前组件的)

$dispatch(事件名, 参数)①向上派发事件,用于向父组件传播。

②会首先触发当前组件的同名事件(如果有);

③然后会向上冒泡,当遇到第一个符合的父组件的事件后触发并停止;

④当父组件的事件的返回值设为true会继续冒泡去找下一个。

$broadcast(事件名, 参数)①向下广播事件,用于向所有子组件传播。

②默认情况是仅限子组件;

③子组件事件的返回值是true,才会继续向该子组件的孙组件派发;

④不会触发自身同名事件;

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

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

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

示例代码:

父组件:点击向下传播broadcast

子组件1:

另一个子组件1:

}, parentClick: function () { console.log("parentClick-anotherChildren2"); } } } } } } });

说明:

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

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

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

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

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

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

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

如示例:

父组件:点击向下传播broadcast

子组件1:

④子组件索引

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

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

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

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

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

示例代码:

父组件:触发子组件的事件

点击复制链接 与好友分享!回本站首页
上一篇:javaee编程开发教程之SSH项目解析
下一篇:JavaScript编程开发之Angularjs留存问题
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站