vue面试题——组件相关面试题

组件面试题

1 组件传值（通信）方式

父组件传递给后代（后代拿到了父组件的数据）

（1）父组件引入子组件，通过绑定数据的方式
父组件：

子组件通过props 进行接收数据

优点 父组件传递给子组件比较方便
缺点： 此时不能够直接从父组件传递给孙子组件，如果孙子组件也需要这个数据，就要从子组件获取，然后通过props进行接收。

（2）子代直接使用父组件的数据，此时父代并没有传递给子代，而是子代直接去获取
通过 this.$parent.xxxx 此时要注意，直接写在html 中不用加 this ，写在 js 中需要加上 this,同时后面 xxxx 代表的意思就是需要获取数据的名字。

缺点： 此时如果孙子组件也想要获取父组件的值，就必须连续多次 $parent

上面两种传值的区别：
（1）第一种方式，子代不能够直接修改父组件的数据。


（2）第二种方式，子组件可以直接修改父组件的数据

第一个数据时刚开始获取的，第二个数据时点击之后修改的

（3） 第三种传值方式 通过依赖注入的方式传递 provide / inject
父组件

子组件

优势： 父组件直接传递某个后代组件数据，不能一级一级的进行数据传递，
注意点 不能在兄弟直接进行传递，也不能传给自己的儿子组件

后代传给父组件（父组件拿到后代的数据）
（1）子组件传值给父组件
子组件自定义事件 this.$emit

父组件：

（2）父组件直接获取子组件的值
第一种：

第二种：可以修改获取到的数据

平辈之间传值（兄弟组件之前传递数据）
通常使用 中央事件总线 bus 进行实现
（1）新建一个bus.js文件

（2）然后在需要传值的 加上 emit

（3）需要接收的加上 on

2 父组件如何直接修改子组件的值

使用 ref 实现

修改值通过

3 子组件如何直接修改父组件的值

this.$parent.xxx

4 如何找到父组件

this.$parent.

5 如何找到根组件

通过 this.$root,如果在根组件本身使用该语法，会找到根组件本身。

6 keep-alive

keep-alive 是用于缓存当前组件

7 插槽 slot

具体的例子：此时给带有温馨提示的页面增加一些功能

插槽的分类：
匿名插槽（插槽没有名字）
首先新建一个插槽，然后在里面进行设计。

<template>
  <div>
    <div>返回箭头</div>
    <div>发布按钮</div>
    <!-- 未命名的情况 -->
    <!-- 此时可以设置一个温馨提示，但是由于存在某些页面中没有温馨提示的功能，所以使用插槽进行实现 -->
    <slot></slot>
  </div>
</template>

<script>
export default {
     
  data() {
     
    //    实现数据的传递
    return {
     
      arr: ["a",