详解Vue组件之间的数据通信实例
最近在用vue做项目,学习了不少东西,但是有时候光顾着做项目却忘记要找个时间来整理一下最近的一些学习新得,因为是新手,所以可能会有错误的地方,欢迎指出和交流呀~~~ 关于父子组件以及非父子组件之间的数据通信1 父子组件之间数据通信一般父组件向子组件传递数据用prop进行传递,注意,子组件不能对prop中的数据进行更改,vue中规定是防止子组件对父组件中的数据进行窜改。而子组件向父组件进行数据传递则可以通过事件触发父组件的事件来实现数据的传递。(是不是有点懵逼了,看个例子吧 ) (这里我就直接摘取一段项目中的例子代码来说明) 使用prop进行数据传递: // 子组件中则需要加prop属性数据 ,如下所示: //所以只要父组件中的数据变化修改,子组件中的数据也会跟这修改; 在chrome中用vue-devtool其实也可以看到相关的数据属性; 当然,子组件做完相关操作之后,需要时间的是将属性值dialogFormVisible重新修改为false。若是直接在子组件进行修改的话,就会报错,因为会影响到父组件的数据,vue中规定不能直接对prop的属性值进行修改。那么就可以用事件触发来实现子组件向父组件传递数据了。 //子组件中的事件分发 // 父组件的事件 这样就实现了父子组件之间的数据传递; 2 实现非父子组件之间的数据传递通过建立中间的事件bus总线。实现非父子组件之间的数据通信。
1 bus.js文件2 组件emit触发事件相关内容
|