vue.js: 自定义事件之—— 子组件修改父组件的值

如何利用自定义的事件,在子组件中修改父组件里边的值?

关键点记住:三个事件名字

步骤如下:

这里,相对本案例,父组件定义为Second-module,对应的子组件是Three-module

第一步:你要想改动父组件的值,你父组件得先有值让你改吧!所以,

在父组件定义值:

第二步:同样的,二者之间咋就成了父子关系了呢?你得让一个组件里边装另一个组件吧,所以

在父组件Second-module中调用、注册、引用进来子组件Three-module:

  调用:

调用

  注册:

注册

  引用:

引用

第三步:父组件定义公用值,就是为了让子组件用的,你得把值给了子组件吧!不要小气:

找到二者的契合点(组件引用处),用bind 把值绑给他。

引用组件并传值

第四步:父组件扔过来了,子组件要接住啊,接不住掉地上摔烂了你还杂用!

props接受父组件传值

第五步:子组件你把值拿过来了,就要使用父组件的值吧,不用就放烂了。不用你接他干哈!

简单使用父组件的值示例

好了,转折点到了,接下就是主题了:改动值。

第六步:子组件你拿到值用着不爽,首先要设置一个开关(click事件)启动“申请改动父组件值”的程序吧

子组件绑定点击事件,以触发自定义事件

第七步:在这个程序中,$emit 启动计划:你要自己找一个壮士(自定义事件名,可以想象成荆轲),好交代让它出征去改动父组件的值,并让他带上一个参数(就是要把父组件的值改成啥,荆轲手里拿的那个包着小匕首的地图🙂,),让他去带话 ,既出使秦国(父组件内部)将燕王(子组件)的旨意传递给父元素(秦大王)。

子组件实例上,使用$emit执行自定义事件

emit英语中是发射的意思,就是让这个自定义事件发射、出发、出征的意思(欢送壮士荆轲是发生在桥上,changeTitle函数就是那个桥,燕王在桥上使用$emit发令,让自定义事件(轲轲)去执行改动父元素值(改变秦王老大的想法,比如不揍燕国,到项目中就是改变付元素中某个状态值等)的伟大壮举。他是一个使者,是链接子组件改动父组件值的桥梁。

第八步:自定义事件来到父组件中(秦王),找到和他同名的事件(也就是荆轲刺秦时,接待荆轲的秦国大臣本人了!,他起着在父组件中用于监听自定义事件的一个作用,时刻准备去火车站接荆轲然后宣荆轲觐见。。这个事件是绑定在 要求改动值的子组件 标签-燕国在秦国的大使馆 上的)。

自定义事件和他的对接人(同名事件)交接,同名事件执行早在这里准备好的另一个父组件里边的函数A,并且把自定义事件从子组件中带来的参数转交接,给了这个函数A的$event(固定名字,不能改)参数。

父组件内部监听自定义事件

第九步:因为同名事件在子组件中被触发了,所以他就会执行他后边定义的函数,函数被执行后,这个函数就带着参数“南下”,去父组件的methods找他自己,并执行函数内部的逻辑。

父组件执行子组件触发后的逻辑

第十步:深明大义的父组件,早在methods中定义好了要修改的逻辑,将要修改的值等于函数带来的参数值(也就是自定义事件捎来的子组件中定义的值)

zidingyi是父组件里边执行自定义事件“后遗症”任务用的

最后!不贴源码的讲解就是耍流氓:

http://www.cnblogs.com/padding1015/p/7878741.html

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏cnblogs

DOM事件第一弹

     近期温习了部分w3c上关于DOM事件的规范,发现以前有些模糊的概念更加清晰,以及受到罗胖(罗辑思维)的影响,很是想分享自己的了解的东西,希望大家给予指...

2046
来自专栏一个会写诗的程序员的博客

JQuery中bind和unbind函数

测试: 页面代码: <body> <input type="button" name="aaa" value="点击我"> <input type="c...

1982
来自专栏天天

js事件对象相关随记

1353
来自专栏GreenLeaves

JavaScript图片库

将图片放到网上的方法有很多,你可以简单地把所有的图片都放到网页上。但是,如果你打算发布的图片过多,这个页面很快会变的过于庞大,而且加上这些图片后用户要下载的的数...

2476
来自专栏Hongten

python开发_tkinter_复选菜单

==============================================================

1152
来自专栏前端知识分享

Vue---父子组件之间的通信

  在vue组件通信中其中最常见通信方式就是父子组件之中的通信,而父子组件的设定方式在不同情况下又各有不同。最常见的就是父组件为控制组件子组件为视图组件。父组件...

932
来自专栏瓜大三哥

matlab GUI基础2

GUIDE编程开发 matlab可视化姐买你的设计,一般有两种方法,一是直接通过编辑M脚本文件产生GUI,二是通过MATLAB图形用户界面开发环境GUIDE来建...

2607
来自专栏前端说吧

Vue-自定义事件之—— 子组件修改父组件的值

3645
来自专栏陈纪庚

HTML5 drag和drop的亲手实践

最近在公司打杂的时候,突然分到了一个锅,就是要支持一个新的功能:用户可以通过拖曳组件来改变组件的顺序。因此,这阵子就看了一下网上的一些drag和drog的文章以...

1203
来自专栏互联网杂技

React中的-- 数据流

简介 React的组件简单理解起来其实就是一个函数,这个函数会接收props和state作为参数,然后进行相应的逻辑处理,最终返回该组件的虚拟DOM展现。在Re...

3669

扫码关注云+社区

领取腾讯云代金券