vue 组件之间的通信

266 阅读1分钟

子传父:

1、子组件提供数据,父组件在需要的时候主动去拿

通过ref 父组件可以去调用和触发子组件的方法和事件,并且可以拿到子组件的数据

父组件


子组件


结果



父传子

子组件通过props 去接收父组件传过来的数据

父组件:


子组件:


父组件传给子组件的值,在父组件中发生改变,子组件也要跟着改变

第一种是通过watch

第二种是通过computed

父组件


子组件:

watch监听


computed监听


computed 与 watch 在这个简单的例子中实现了同样的效果,具体是用谁监听还是看场景



子组件改变props中传过来的值

子组件中不能直接改变,props中传过来的值,这里我们可以用事件机制去做,也可以通过.sync去做

(1)事件机制

父组件


子组件


(2).sync

父组件


子组件



通过bus来传值