Vue的生命周期和父子,兄弟组件传值

732 阅读1分钟

生命周期的流程图

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