Vue 进阶面试题, 在 Vue 子组件中如何访问父组件的实例?
Vue 进阶面试题, 在 Vue 子组件中如何访问父组件的实例?
QA
Step 1
Q:: 在 Vue 子组件中如何访问父组件的实例？
A:: 在 Vue.js 中，子组件可以通过 $parent 属性访问父组件的实例。例如，this.$parent 可以访问父组件的所有数据、方法和其他属性。但是，使用 $parent 访问父组件并不是推荐的做法，因为这会导致组件之间的紧密耦合，破坏了组件的独立性和可复用性。推荐的做法是通过 props 传递数据或通过事件传递行为。
Step 2
Q:: 为什么使用 $parent 访问父组件实例不是推荐的做法？
A:: $parent 访问父组件实例会破坏组件的独立性，因为子组件变得依赖于父组件的结构和实现细节。这种耦合使得组件难以复用，增加了维护成本。因此，Vue 官方推荐使用 props 和事件来进行父子组件之间的通信，以保持组件的独立性和可维护性。
Step 3
Q:: 如何通过 props 在子组件和父组件之间传递数据？
A:: 在 Vue.js 中，父组件可以通过 props 向子组件传递数据。父组件在使用子组件时，通过绑定属性的方式向子组件传递数据，例如：<child-component :prop-name="parentData"></child-component>。子组件可以通过 props 选项接收父组件传递的数据，并通过 this.propName 访问该数据。
Step 4
Q:: 子组件如何与父组件通信并触发父组件的方法？
A:: 子组件可以通过 $emit 方法触发自定义事件，将数据发送回父组件。父组件可以通过监听子组件的自定义事件来执行相应的操作。例如，在子组件中可以使用 this.$emit('customEvent', data) 来触发事件，在父组件中通过 <child-component @customEvent="handleEvent"></child-component> 监听该事件并调用 handleEvent 方法。
Step 5
Q:: 如何使用 Vue 的 provide/inject 来实现父子组件之间的通信？
A:: Vue 的 provide/inject API 允许祖先组件向所有子孙组件注入数据，而不需要逐层传递 props。祖先组件使用 provide 提供数据，子孙组件使用 inject 接收数据。例如：在父组件中 provide() { return { dataKey: 'value' } }，在子组件中 inject: ['dataKey']。需要注意的是，这种方式会使组件之间产生依赖，应该谨慎使用。