--- theme: healer-readable highlight: androidstudio --- ![v2-d650eb1f413f1e734b44c1939bba343c_1440w.jpg](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d5c0e7914d6742a1ace79dce2ff3eeb1~tplv-k3u1fbpfcp-watermark.image) **vue组件传值在日常开发中比较常见。一般有三种传值方式：1.父传子、2.子传父、3.兄弟组件之间通信** ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b2efa6589aa0485f97a0d8af63fab667~tplv-k3u1fbpfcp-zoom-1.image) ### 父子组件传值父组件代码如图下： ```js ``` 子组件如图下： ```js ``` 以上就是父子组件传值，需要注意的是父组件要记住三步：1、引入2、注册3、声明。父组件传值使用':'来动态传值，【:list="list"】前面是属性名后面是属性值子组件需要注意的是使用props来接收父组件传来的值，props后面跟'[]'是不限制类型，跟'{}'需要加上值的数据类型，否则会报错。子组件传值使用：*this.$emit（'属性名'，'属性值'）*，父组件接收使用：*@属性名='传来的属性名'* ### 非父子组件传值（兄弟传值）当点击组件1，组件2内容随即改变内容；反之，也是实现这样的功能 **方式：** 非父子组件中的 **兄弟组件之间** 如何传递数据， 1、先看一下点击组件本身，在组件本身出现数据变化 ```js

``` 分别弹出各自的内容 2、再看看如何把数据传递给另一个组件 ```js //div部分同上 ``` 3、向外触发事件之后，其他组件将通过 *监听* 的方式接收数据方式：借助生命周期钩 ```js //div部分同上 ``` 一个child的组件去触发事件时，两个child组件通过 ***$on*** 监听 change 对同一个事件进行事件，监听到该事件后，两个组件都会弹事件中对组件的触发事件所传递过来的内容（两组件实际共弹了四次弹窗） 5、兄弟组件间进行传值完整代码： ```js

```