阅读 111

Vue的生命周期和父子,兄弟组件传值(vue父子组件间的参数传递是如何做到的)

生命周期的流程图

image.png

生命周期的应用场景

钩子函数状态
beforeCreate创建前的状态
created创建完毕的状态
beforeMount挂载前的状态
mounted挂载结束的状态
beforeUpdate更新前的状态
update更新完成的状态
beforeDestroy销毁前的状态
destroyed销魂完成的状态

父子组件传值

在父组件里面引子组件

image.png

在父组件里面动态传值给子组件,并定义自定义事件来接收子组件传来的值

image.png

image.png

在子组件里面接收父组件传过来的值 并设置一个点击事件 把要修改的值通过this.$emit传给父组件

image.png

this.$emit

父组件里面的 @changeText="changeText" 前面的changeText是传给子组件的自定义事件, 后面的changeText是父组件里面调用的函数

在子组件里面添加一个click事件点击的时候通过this.$emit触发自定义事件并传值给父组件

image.png

兄弟传值

在共同的父组件里面调用子组件

image.png

定义一个bus.js 中间件

image.png

在子组件里面引用bus.js

定义一个点击事件 引用bus.js 执行点击事件 使用bus.$emit触发自定义事件 去往兄弟组件传值

image.png

在里面定义一个值 在生命周期里面监听自定义事件,来接收传递过来的值并修改值

image.png


作者:用户111
链接:https://juejin.cn/post/7028854369554530334


文章分类
代码人生
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
相关推荐