前端面试——Vue篇（组件传值/通信方式）

1.父传子

（1）父组件传值给子组件

父组件内引入子组件，绑定数据，子组件通过props进行接收，这种方式父传子很方便，但是父传孙就很麻烦了。

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

（2）子组件直接使用父组件值

父组件没有传给子组件值，子组件直接使用父组件的数据，子组件通过this.$parent.xxx获取父组件的数据。

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

（3）依赖注入

通过依赖注入。父组件可以直接向某个后代传递值（不用一级一级传递），缺点是看不到详细的路径，不知道是由哪儿个父组件传递而来。

注意：Provide/inject进行传递。

2.子传父

（1）子组件传值给父组件

子组件通过定义自定义事件this.$emit，（第一个参数为方法名，第二个参数为数据值）。

（2）父组件直接修改子组件的值

this.$refs.child

3.兄弟之间

通过bus.$emit和bus.$on进行传递

补充：

第一问：父组件如何直接修改子组件的值?

this.$refs.child.xxx=’yyyyyyy’

第二问：子组件如何直接修改父组件的值?

this.$parent.xxx=’yyyyyyy’