2023-09-08 23:31 广州软件学院前端工程师

关注

前端面试必备 | Vue组件传值篇(P1-30)

alt

文章目录

Vue 中组件传值有哪些方式？
请说明 props 在 Vue 中的作用是什么，以及示例用法。
Vue2 中父组件向子组件传递数据是怎么实现的？
父组件向子组件传递数据时，为什么需要用 props 来声明和接收数据？
Vue2 中子组件向父组件传递数据的方式是什么？
Vue2 的单向数据流是指什么？
请解释 Vue3 中 Composition API 如何实现组件间的数据传递。
Vue3 中提供了哪些新的 API 用于组件间传递数据？
请比较 Vue2 中的 $emit 和 Vue3 中的 emit 函数的区别。
Vue3 中可以通过哪种方式实现同级组件间的数据传递？
Vue3 中如何实现跨级组件间的数据传递？
Vue3 中的 provide 和 inject 有什么作用？请举例说明。
Vue2 中如何实现兄弟组件的数据传递？
Vue3 中可以使用哪种方式实现兄弟组件的数据传递？
请说明 Vue3 中的 ref 和 reactive 的区别，以及适用场景。
如何在 Vue3 中实现子组件向父组件派发事件？
Vue3 中如何监听子组件的事件？
请解释 Vue2 中的 v-model 指令的作用。
Vue3 中的 v-model 在用法上有哪些变化？
Vue3 中的 Teleport 组件有什么作用？请说明用法。
Vue3 中的 v-bind 指令有何变化？
Vue2 中通过 $refs 获取子组件实例有什么限制？
Vue3 中在 setup 函数中如何获取子组件的实例？
Vue2 中如何监听子组件的生命周期钩子？
Vue3 中如何监听子组件的生命周期钩子？
请说明 Vue2 中的 provide 和 inject 的作用。
Vue3 中的 setup 函数中如何使用 provide 和 inject？
Vue2 中如何实现非父子组件的数据传递？
Vue3 中如何实现非父子组件的数据传递？
Vue3 中如何使用事件总线实现任意组件间的数据传递？

1. Vue 中组件传值有哪些方式？

Vue 中组件传值的方式主要有以下几种：

使用 props：父组件通过 prop 将数据传递给子组件，在子组件中通过 props 来接收和使用传递的数据。
使用事件：子组件通过 $emit 方法触发一个自定义事件，并将数据作为参数传递给父组件，在父组件中通过 v-on 监听子组件事件并处理传递的数据。
使用自定义事件总线：通过创建一个空的 Vue 实例作为事件中心，组件之间可以通过该实例进行事件的触发和监听，从而实现跨组件的数据传递。
使用 provide 和 inject：父组件通过 provide 向所有子孙组件注入数据，子组件通过 inject 来接收注入的数据，从而实现跨级组件间的数据传递。
使用 Vuex（状态管理）：通过创建一个全局的 store 对象来存储和管理应用的状态，各个组件可以通过读取和修改 store 中的数据来实现组件间的数据传递。

alt

注意：上述方式在 Vue3 中仍然适用，并且在 Vue3 中还引入了 Composition API，可以更灵活地进行组件间的数据传递和状态管理。

2. 请说明 props 在 Vue 中的作用是什么，以及示例用法。

在Vue中，props是一种用于从父组件向子组件传递数据的机制。

它可以让父组件将数据传递给子组件，在子组件中可以使用这些数据来进行渲染或执行其他操作。

props允许父组件向子组件传递任意类型的数据，包括基本数据类型、对象、数组等。子组件通过在自己的接收参数中声明props来接收这些数据。

以下是一个示例，展示了如何在Vue中使用props：

父组件：

<template>
  <div>
    <child-component :message="parentMessage"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from parent'
    };
  }
};
</script>

子组件（ChildComponent.vue）：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: ['message']
};
</script>

在上面的示例中，父组件通过使用冒号语法将父组件的parentMessage数据传递给子组件的message属性。子组件使用props声明属性message，并在模板中使用它来显示数据。

运行应用程序时，子组件将显示来自父组件的消息："Hello from parent"。

在子组件中，您可以使用props接收到的数据执行任意操作，例如用props中的数据进行计算、渲染列表等。

总结来说，props在Vue中用于父子组件之间的数据传递，通过props可以将数据从父组件传递给子组件，以实现组件之间的交互和通信。

3. Vue2 中父组件向子组件传递数据是怎么实现的？

在 Vue2 中，父组件向子组件传递数据主要通过 props 来实现。

以下是实现父组件向子组件传递数据的步骤：

在父组件中，在子组件标签上使用 v-bind 或简写方式 ":"，将需要传递的数据绑定到子组件的 props 上，可以是父组件的属性、计算属性、方法或动态变量。

<template>
  <div>
    <child-component :propName="data"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent'

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      data: 'Hello'
    }
  }
}
</script>

在子组件中定义 props 对象，声明需要接收的数据字段。

<template>
  <div>
    <p>{{ propName }}</p>
  </div>
</template>

<script>
export default {
  props: ['propName']
}
</script>

在子组件的 props 中，可以设置类型、默认值、验证等属性，以满足不同的需求。

通过以上步骤，父组件的数据就可以传递到子组件中，并在子组件中使用 this.propName 访问传递的数据。

需要注意的是，由于 Vue2 中的 props 是单向数据流，即父组件向子组件传递的数据是只读的，子组件无法直接修改父组件传递的 props 数据。如果需要修改父组件的数据，可以通过在子组件中触发事件，由父组件来修改数据。

4. 父组件向子组件传递数据时，为什么需要用 props 来声明和接收数据？

在Vue中，通过props来声明和接收数据有以下几个原因：

数据流向清晰：通过使用props，父组件可以明确地传递数据给子组件，从而使数据的流向清晰可见。这种明确的数据流动方式使得代码更易于理解和维护，特别是在大型应用程序或复杂的组件层次结构中更加重要。
组件解耦：通过使用props来传递数据，父组件和子组件之间可以实现解耦。父组件不需要关心子组件内部如何处理数据，只需将数据传递给子组件，而子组件也不需要了解数据的来源。这种解耦可以使得组件更加独立和可复用。
数据验证和类型检查：使用props声明数据时，可以对数据进行验证和类型检查，以确保接收到的数据满足特定要求。在子组件的props声明中，可以指定props的类型、是否必需以及默认值等信息，Vue会在运行时检查传递的数据是否与声明相符，从而提供更好的数据安全性和错误提示。
单向数据流：Vue推荐单向数据流的模式，props的使用符合这一模式。通过将数据传递给子组件的props，可以确保子组件不会直接修改父组件的数据，避免了数据混乱和难以追踪的问题。这种单向数据流的方式使得应用程序更加可预测和可维护。

alt

综上所述，通过使用props声明和接收数据，可以使数据流向清晰、组件解耦、提供数据验证和类型检查，并遵循单向数据流的原则，从而提高应用程序的可维护性和可扩展性。

5. Vue2 中子组件向父组件传递数据的方式是什么？

在 Vue2 中，子组件向父组件传递数据的方式主要通过触发自定义事件，并将数据作为事件的参数来实现。

以下是实现子组件向父组件传递数据的步骤：

在子组件中，通过使用 $emit 方法触发一个自定义事件，并传递需要传递的数据作为参数。

<template>
  <button @click="sendData">发送数据</button>
</template>

<script>
export default {
  methods: {
    sendData() {
      const data = 'Hello'
      this.$emit('eventName', data)
    }
  }
}
</script>

在父组件中，在子组件标签上使用 v-on 或简写方式 @ 监听子组件触发的自定义事件，并在事件处理函数中接收子组件传递的数据。

<template>
  <div>
    <child-component @eventName="handleEvent"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent'

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleEvent(data) {
      console.log(data) // 通过子组件传递的数据
    }
  }
}
</script>

通过以上步骤，子组件就可以向父组件传递数据了。在子组件中使用 this.$emit('eventName', data) 触发事件，并在父组件中使用 @eventName="handleEvent" 监听事件，在 handleEvent 方法中接收传递的数据。在实际应用中，可以根据具体需求进行适当的命名。

6. Vue2 的单向数据流是指什么？

在Vue 2中，单向数据流是指数据在应用程序中的流动方向。

按照Vue的设计理念，数据在Vue组件中的流动是单向的，即从父组件传递给子组件，而子组件不能直接修改父组件的数据。这种单向数据流模式有助于维护和追踪数据的变化，使得应用程序更加可预测和可维护。

具体来说，单向数据流的模式包含以下几个关键点：

数据从父组件传递给子组件：父组件可以通过props将数据传递给子组件。子组件在props声明中接收这些数据，并在组件内部使用。
子组件不直接修改父组件数据：子组件接收到的props数据是只读的，不能直接对其进行修改。如果需要修改这些数据，子组件可以通过触发事件的方式，通知父组件进行相应的更改。
数据变更通过事件反馈给父组件：子组件可以通过触发自定义事件的方式，向父组件传递数据变更的信息。父组件监听这些事件，并在事件处理程序中更新相应的数据。

alt

通过这种单向数据流的方式，Vue实现了数据的可控性和可追踪性。父组件作为数据的源头，掌握着数据的权威性和修改权限。子组件作为数据的消费者，负责接收和显示数据，并通过事件告知父组件数据变更的需求。这种明确的数据流动方式有助于开发人员更好地理解和追踪数据在组件之间的传递和变化，提高了代码的可维护性和可读性。

需要注意的是，在Vue中虽然主要采用单向数据流的模式，但是在特定情况下也可以使用.sync修饰符或.sync语法糖来实现双向数据绑定，允许子组件修改父组件的数据。但是在使用时需要谨慎，确保双向绑定的使用场景合理，并明确双向绑定可能带来的副作用和复杂性。

7. 请解释 Vue3 中 Composition API 如何实现组件间的数据传递。

在 Vue3 中，Composition API 提供了更灵活和直观的方式来实现组件间的数据传递。

以下是一种常见的方式来实现组件间的数据传递：

使用 ref 或 reactive 创建响应式数据。

import { ref } from 'vue'

// 在父组件中创建一个响应式数据
const data = ref('Hello')

export default {
  setup() {
    return {
      data
    }
  }
}

使用 provide 在父组件中提供数据。

import { provide } from 'vue'

export default {
  setup() {
    // 在父组件的 setup 函数中使用 provide 提供数据
    provide('propName', data)

    // ...
  }
}

在子组件中使用 inject 来接收父组件提供的数据。

import { inject } from 'vue'

export default {
  setup() {
    // 在子组件的 setup 函数中使用 inject 来接收父组件提供的数据
    const data = inject('propName')

    // ...
  }
}

通过以上步骤，父组件提供的数据就可以在子组件中使用了。使用 provide 提供数据，并通过 inject 接收数据，使得父组件和子组件之间可以进行数据的传递，无论组件的嵌套层级有多深都可以访问和使用这些数据。

需要注意的是，provide 和 inject 配合使用，能够实现跨级组件间的数据传递，但不推荐滥用，而是在真正需要的情况下使用，以避免数据传递的复杂性和耦合度增加。

8. Vue3 中提供了哪些新的 API 用于组件间传递数据？

在Vue 3中，为了更好地支持组件间的数据传递，引入了一些新的API。

以下是一些在Vue 3中用于组件间传递数据的新API：

setup() 函数：在Vue 3中，使用setup()函数代替了Vue 2中的created和beforeCreate等声明周期钩子函数。setup()函数接收两个参数，props和context，用于初始化组件。通过setup()函数可以直接访问和操作传递给组件的props，实现了更便捷的props访问。
defineProps() 函数：用于定义组件的props。在Vue 3中，可以使用defineProps()函数来明确声明组件的props，取代Vue 2中的props选项。这样可以更直观地定义和描述组件需要接收的props，包括类型、默认值等。
defineEmits() 函数：用于定义组件可触发的事件。在Vue 3中，可以使用defineEmits()函数明确声明组件可以触发的事件，并指定事件名称和参数。这样可以增加代码的可读性和组件的可维护性。
inject() 和 provide() 函数：用于跨级组件之间的数据传递。Vue 3引入了inject()和provide()函数，允许在父组件中使用provide()提供数据，然后在子孙组件中使用inject()来注入和访问这些数据。这种方式可以避免一层层通过props传递数据，使得组件间的数据传递更加便捷和灵活。
ref() 和 reactive() 函数：用于创建响应式数据。Vue 3中的ref()和reactive()函数可以分别创建基本类型和对象类型的响应式数据。通过使用这些函数创建的数据可以自动追踪变化，并在变化时更新视图，实现数据驱动视图的特性。

alt

这些新的API提供了更灵活和直观的方式来处理组件间的数据传递，使得Vue 3在这方面的开发更加便捷和可维护。同时，这些API的引入也提升了开发体验和代码的可读性。

9. 请比较 Vue2 中的 $emit 和 Vue3 中的 emit 函数的区别。

在Vue 2中，使用$emit是在组件中触发自定义事件的方法。通过$emit可以向该组件的父组件传递数据，通知父组件进行相应处理。示例代码如下：

// Vue 2
// 子组件中使用$emit触发自定义事件
this.$emit('customEvent', data);

而在Vue 3中，可以使用emit函数来实现相同的功能，但具体用法略有不同。在Vue 3中，emit函数是在组件的context对象中提供的一个方法。通过emit函数，组件可以触发自定义事件，将数据传递给父组件。示例代码如下：

// Vue 3
// 组件中通过emit函数触发自定义事件
context.emit('customEvent', data);

在Vue 3中，通过setup()函数获取到的context对象中包含了一系列的API，包括emit函数。这使得在组件内部触发自定义事件更加直接和一致，不再需要前缀$，减少了命名冲突的可能性。

需要注意的是，在Vue 3中，emit函数的调用需要通过context对象来访问，而不是直接在组件实例中使用。这是因为Vue 3中将组件实例与组件的上下文对象进行了解耦，提高了API的灵活性和可扩展性。

总结来说，Vue 2中使用$emit来触发自定义事件，而在Vue 3中使用emit函数，这是Vue 3中对API的重新设计和调整的一部分。使用emit函数的方式更加一致和直观，与其他API的使用方式更加统一，提升了代码的可读性和维护性。

10. Vue3 中可以通过哪种方式实现同级组件间的数据传递？

在Vue 3中，可以通过使用provide()和inject()函数来实现同级组件之间的数据传递。这种方式可以避免通过props将数据一层层传递给子组件，而直接在父组件中提供数据，然后在需要的子组件中进行注入。

具体来说，provide()函数用于在父组件中提供数据，子组件通过inject()函数来接收和访问这些数据。这种方式不受组件层级限制，可以在同级组件之间进行数据传递。

下面是一个示例代码，展示如何在同级组件中使用provide()和inject()函数进行数据传递：

<!-- Parent.vue -->
<template>
  <div>
    <Child1 />
    <Child2 />
  </div>
</template>

<script>
import { provide } from 'vue';
import Child1 from './Child1.vue';
import Child2 from './Child2.vue';

export default {
  components: {
    Child1,
    Child2
  },
  setup() {
    const data = 'Hello from Parent';
    provide('sharedData', data); // 在父组件中提供数据
  }
};
</script>

<!-- Child1.vue -->
<template>
  <div>
    <p>{{ sharedData }}</p>
  </div>
</template>

<script>
import { inject } from 'vue';

export default {
  setup() {
    const sharedData = inject('sharedData'); // 在子组件中注入数据
    return {
      sharedData
    };
  }
};
</script>

<!-- Child2.vue -->
<template>
  <div>
    <p>{{ sharedData }}</p>
  </div>
</template>

<script>
import { inject } from 'vue';

export default {
  setup() {
    const sharedData = inject('sharedData'); // 在子组件中注入数据
    return {
      sharedData
    };
  }
};
</script>

在上述示例中，父组件Parent.vue使用provide()函数提供了名为sharedData的数据。然后，子组件Child1.vue和Child2.vue使用inject()函数注入并访问了这个数据。这样即可在同级组件之间实现数据的传递。

需要注意的是，provide()和inject()函数要求父组件和子组件在使用时都要在同一个setup()函数中调用，以确保数据的正确传递和响应。同时，需要确保提供的键（例如上述示例中的'sharedData'）在注入时是唯一的，以避免命名冲突。

通过使用provide()和inject()函数，你可以方便地进行同级组件之间的数据传递，而不需要维护复杂的props链。这提升了组件的灵活性和可维护性，让数据传递更加简洁和直观。

11. Vue3 中如何实现跨级组件间的数据传递？

在Vue 3中，可以通过以下几种方式实现跨级组件间的数据传递：

使用props：父组件可以通过props将数据传递给子组件，并通过props链在组件层级间进行数据传递。
使用provide和inject：父组件可以使用provide函数提供数据，子孙组件可以使用inject函数注入并访问这些数据，从而实现跨级数据传递。
使用事件总线（Event Bus）：创建一个新的Vue实例作为事件总线，用于在组件之间触发和监听自定义事件，从而实现跨级数据传递。
使用Vuex：Vuex是Vue的官方状态管理库，可以在多个组件中共享状态，并通过Vuex的API进行数据传递和管理。

这些方法在不同的场景下可以选择使用，根据具体需求和组件层级结构选择最适合的数据传递方式。

12. Vue3 中的 provide 和 inject 有什么作用？请举例说明。

在Vue 3中，provide和inject是一对用于实现组件间数据传递的函数。它们的作用如下：

provide函数：provide函数允许父组件向其所有子孙组件提供数据。父组件通过调用provide函数并提供数据，将这些数据暴露给子组件。
inject函数：inject函数用于在子孙组件中注入并访问父组件提供的数据。子孙组件通过调用inject函数并指定要注入的数据键（key），可以获取父组件提供的数据。

通过使用provide和inject，可以在跨级组件间进行数据传递，而不需要手动通过props链将数据逐层传递。这在某些场景下非常有用，特别是当组件层级较深，且需要在层级间共享数据时。

需要注意的是，provide和inject是在组件的 setup 函数中使用的。另外，使用时应谨慎命名提供的键（key），以确保键在注入时是唯一的，避免命名冲突。

通过使用provide和inject，我们可以更灵活地进行组件间数据传递，而不仅局限于父子组件之间。同时，它也提供了一种更直接的方式来共享数据，简化了组件层级传递数据的复杂性。

13. Vue2 中如何实现兄弟组件的数据传递？

在Vue 2中，可以使用以下几种方式来实现兄弟组件间的数据传递：

使用共享状态：创建一个Vue实例作为共享状态的中央数据仓库，然后在需要共享数据的兄弟组件中通过该实例进行状态管理和数据传递。
使用事件总线（Event Bus）：创建一个新的Vue实例作为事件总线，兄弟组件通过事件总线来触发和监听自定义事件，从而实现数据传递。
使用父组件作为中介：如果兄弟组件具有共同的父组件，可以通过父组件作为中介，在兄弟组件之间传递数据。父组件接收一个兄弟组件的数据，然后通过props将数据传递给另一个兄弟组件。
使用外部存储（如localStorage或vuex）：将需要传递的数据保存在外部存储中，然后在需要的兄弟组件中读取和修改数据。

这些方法都可以用于实现兄弟组件间的数据传递，选择合适的方法取决于具体的场景和需求。每种方法都有其适用性和限制性，需要根据实际情况进行选择。在使用事件总线或共享状态时，需要注意避免命名冲突和确保数据的一致性。

14. Vue3 中可以使用哪种方式实现兄弟组件的数据传递？

在Vue 3中，可以使用以下几种方式来实现兄弟组件间的数据传递：

使用共享状态：通过创建一个响应式的数据（例如，使用ref或reactive），并将其作为一个单独的模块导出，然后在需要传递数据的兄弟组件中导入并使用该数据。这样兄弟组件就可以直接共享该数据，并实现数据的双向绑定。
使用事件总线（Event Bus）：与Vue 2类似，可以创建一个新的Vue实例作为事件总线，并在兄弟组件中通过事件总线来触发和监听自定义事件，从而实现数据传递。
使用父组件作为中介：如果兄弟组件具有共同的父组件，可以通过父组件作为中介，在兄弟组件之间传递数据。可以通过父组件提供数据的provide函数，然后在兄弟组件中使用inject函数来获取父组件提供的数据。
使用外部存储（如localStorage、IndexedDB或Vuex）：与Vue 2中类似，将需要传递的数据保存在外部存储中，然后在需要的兄弟组件中读取和修改数据。

这些方法在Vue 3中也适用于实现兄弟组件间的数据传递。具体选择哪种方法取决于你的应用场景和需求。根据不同情况，可以选择最适合的方式来传递和管理兄弟组件之间的数据。要注意保持数据的一致性和避免命名冲突。

15. 请说明 Vue3 中的 ref 和 reactive 的区别，以及适用场景。

在Vue 3中，ref和reactive是用于创建响应式数据的两种不同方式，它们有以下区别和适用场景：

ref：ref函数接收一个初始值，并返回一个包装了该值的响应式对象。它将基本类型的值（如数字、字符串）或对象进行内部包装，使其成为响应式数据。要访问ref对象中的值，需要使用.value语法。

适用场景：

对于单一值或基本类型的数据，使用ref更为简洁和直观。
在模板中使用时，不需要再使用.value访问，可以直接在模板中使用。

示例：

import { ref } from 'vue';

const count = ref(0); // 创建一个响应式对象

console.log(count.value); // 访问值

count.value++; // 修改值

reactive：reactive函数接收一个普通对象，并返回一个包装了该对象的响应式代理对象。它会递归地将对象以及对象的所有属性包装成响应式数据。

适

剩余60%内容，订阅专栏后可继续查看/也可单篇购买

前端面试必备文章被收录于专栏

前端面试必备知识点：HTML和CSS、JS(变量/数据类型/操作符/条件语句/循环;面向对象编程/函数/闭包/异步编程/ES6)、DOM操作、HTTP和网络请求、前端框架、前端工具和构建流程、浏览器和性能优化、跨浏览器兼容性、前端安全、数据结构和算法、移动端开发技术、响应式设计、测试和调试技巧、性能监测等。准备面试时，建议阅读相关的技术书籍、参与项目实践、刷题和练习，以深化和巩固你的知识。