[Vue面试题]关于组件

1组件传值（通信）的方式

父传后代 ( 后代拿到了父的数据 )

1. 父组件引入子组件，绑定数据(srt)

<Son :Data='str'></List>

子组件通过props来接收

props:{

Data:{

type:String, //设置变量类型

default:'' //设置初始值

}}

这种方式父传子很方便，但是父传给孙子辈分的组件就很麻烦（父->子->孙）

这种方式：子不能直接修改父组件的数据

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

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

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

3. 依赖注入

优势：父组件可以直接向某个后代组件传值(不需要一级一级的传递)

在父组件provide与data平级，写出如下样式

而在后代组件中，只需要注入就可以了，如下图所示

就可以直接获得到val的数据内容

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

1. 子组件传值给父组件

子组件定义自定义事件 this.$emit,下图中str是要传过去的数据，而change是我们自定义的事件名称

父组件要在子组件上面使用相应的事件并绑定相应的函数方法

下面是简单地打印一下子组件传过来的数据

tip:如果自定义方法是通过交互行为来得到子组件的数据的话，那么则在created、beforeMount、mounted使用自定义的方法是无效的

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

(1) 可以直接this.$children[0].str

这里是假设只有一个子组件，所以children后下标为0，需要传送的数据是str

但这里的子组件的数据只能在父组件的数据里面拿到，而不能直接{{this.@children[0].str}}来渲染到页面上，如果强行要渲染到页面上，则可以设置一个变量，将值赋给这个变量，再又这个变量来渲染到页面上

(2) 使用ref来获取

<Son ref='sonData'></Son>

ref可以获取到dom

然后我们就可以通过this.$refs.sonData.xxx来获取到数据了，下图传送过来的数据是str

平辈之间的传值 ( 兄弟可以拿到数据 )

这个时候我们可以通过新建bus.js文件来做

然后分别在兄弟组件内导入bus.js

接着我们也是需要通过自定义事件来传送数据的

发送数据组件方如下(自定义一个btn事件,传送的数据是str，事件的名称是change)：

收到数据组件方如下(自定义一个形参val，则val就是穿过来的数据啦):

父组件是this.$parent来查找，那么根组件呢？

通过this.$root

tip:如果根组件使用this.$parent来查找，是会返回自身的