天天看点

vue兄弟组件的传值

  写这篇博客是自己在做vue的一些项目中发现,虽然你更多的是简单的一些父子组件的传值,但是很多场景是需要兄弟组件的传递的,之前不太懂,现在有学习这个vue兄弟组建的传值,来分享给大家

第一种传值方式

  1.   新建一个bus.js的文件
vue兄弟组件的传值
vue兄弟组件的传值

  2.新建两个兄弟组件child2,child3,需要在每一个兄弟组件里面引入bus.js

  child2组件通过调用$emit发送给child3

  child3通过$on函数来接受

vue兄弟组件的传值
vue兄弟组件的传值

第二种方式

  通过父组件进行值的传递,A组件传给父组件,父组件再传递给B组件

   A.vue 绑定一个handelClick方法,向父组件发送参数,父组件在对应的A.vue上接受参数,在listLogin上去进行改变,然后传递给B.vue

vue兄弟组件的传值
vue兄弟组件的传值

B.vue上定义props去接受父组件传递的参数,通过接受回的这个参数,去控制b.vue的显示和隐藏

注意在b.vue里面不可以直接使用props接受回来的参数,因为props是单向数据流,当父组件发生变化时会传递给子组件,但是反过来是不行的,需要使用computed去监听这个属性值的变化,否则,子组件发生改变,父组件会提示警告

vue兄弟组件的传值

vue兄弟组件的传值,我知道的就这两种,希望可以帮到更多学习vue的codeman