Vue 组件间传值

​
**

组件间传值

**

1. 父传后代（后代拿到了父的数据）

< List :str1 = 'str1'>< /List>

1）父引入子组件，绑定数据

子组件通过props来接收

props:{

    str1:{

           type:String,

           default:''

    }

}

*** 这种方式父传子很方便，但是父传给子辈份的组件就很麻烦（父=>子=>孙）
这种方式：子不能直接修改父组件的数据

2）子组件直接使用父组件的数据

子组件通过this.$parent.xxx使用父组件的数据

这种方式：子可以修改父组件的数据

3）依赖注入(父传给某个后代)

父直接传给某个后代传值

Provide/inject =》依赖注入

2.后代传父（父拿到了后代的数据）

1）子组件传值给父组件

子组件定义自定义事件this.$.emit

2) 父组件直接拿到子组件的数据

< List ref=’child’>< /List >
this.$refs.child

父组件如何直接修改子组件

< List ref=’child’>< /List>

this.$refs.child.xx = 'xxx'

3.平辈之间的传值（兄弟可以拿到数据）

通过bus.js文件来做