Vue 基础面试题, Vue 父子组件之间传值有哪些方式?

Step 1

Q:: Vue 父子组件之间传值有哪些方式？

A:: Vue 父子组件之间传值的方式主要有以下几种： 1. 父组件传递数据给子组件：通过 props 进行传递。父组件在子组件上定义一个属性，通过该属性传递数据到子组件内部。 2. 子组件传递数据给父组件：通过事件传递。子组件可以使用 $emit 方法触发自定义事件，父组件通过监听这些事件来获取子组件传递的数据。 3. 父组件通过 ref 访问子组件实例：父组件可以通过 ref 属性获取子组件的实例，进而直接调用子组件的属性或方法。 4. provide 和 inject：适用于跨级组件传递数据，父组件通过 provide 提供数据，子组件通过 inject 接收数据。 5. 使用状态管理工具：如 Vuex，可以在整个应用中共享数据，而不受限于父子关系。

Step 2

Q:: 如何在 Vue 中实现父子组件之间的双向数据绑定？

A:: 在 Vue 中，父子组件之间的数据传递通常是单向的（父组件传递数据给子组件，子组件通过事件将数据传递给父组件）。如果要实现双向数据绑定，可以使用 v-model，但需注意以下几点： 1. 子组件需要声明一个 props 来接收父组件传递的数据，通常命名为 value。 2. 子组件需要在相应事件中 $emit 一个 input 事件来通知父组件数据的变化。 3. 父组件使用 v-model 进行数据绑定时，会自动处理这两个过程。

Step 3

Q:: 什么是 Vue 中的 Prop 验证？如何使用它？

A:: Prop 验证用于确保父组件传递给子组件的数据是符合预期的类型或格式。在 Vue 中，子组件可以通过在 props 选项中定义验证规则来实现。例如：

 
props: {
  title: {
    type: String,
    required: true,
    default: '默认标题',
    validator: function (value) {
      return value.length > 0;
    }
  }
}
 

这里，title 是一个必填的字符串类型的 prop，并且默认值为 '默认标题'。此外，validator 函数可以进行更复杂的验证。