vue3兼容vue2的组件吗,vue3 调用子组件方法

在 Vue3 中，子组件调用父组件的方法（如 `getList`）通常通过以下几种方式实现： ### 1. 使用 `emit` 和 props 传递方法 父组件可以将方法作为 prop 传递给子组件，或者子组件通过 `$emit` 触发事件，由父组件监听并执行相应方法。 #### 父组件示例： ```vue <template> <ChildComponent :get-list="getList" /> </template> <script setup> import { defineProps } from &#39;vue&#39;; const getList = () => { // 获取数据逻辑 }; defineProps({ getList: { type: Function, required: true } }); </script> ``` #### 子组件示例： ```vue <template> <button @click="callParentGetList">Call Parent Method</button> </template> <script setup> import { defineProps } from &#39;vue&#39;; const props = defineProps({ getList: { type: Function, required: true } }); const callParentGetList = () => { props.getList(); }; </script> ``` ### 2. 使用 `v-model` 或自定义事件 子组件可以通过 `$emit` 触发一个事件，父组件监听该事件并执行 `getList` 方法。 #### 父组件示例： ```vue <template> <ChildComponent @refresh-list="getList" /> </template> <script setup> const getList = () => { // 获取数据逻辑 }; </script> ``` #### 子组件示例： ```vue <template> <button @click="triggerRefresh">Trigger Refresh</button> </template> <script setup> import { defineEmits } from &#39;vue&#39;; const emit = defineEmits([&#39;refresh-list&#39;]); const triggerRefresh = () => { emit(&#39;refresh-list&#39;); }; </script> ``` ### 3. 使用 `provide/inject` 实现跨层级调用 如果子组件和父组件之间存在多层嵌套，可以使用 `provide` 和 `inject` 来实现跨层级访问父组件的方法。 #### 祖先组件（提供方法）： ```vue <script setup> import { provide } from &#39;vue&#39;; const getList = () => { // 获取数据逻辑 }; provide(&#39;getList&#39;, getList); </script> ``` #### 后代组件（注入方法）： ```vue <script setup> import { inject } from &#39;vue&#39;; const getList = inject(&#39;getList&#39;); // 调用父组件方法 getList(); </script> ``` ### 4. 使用 Composition API 的 `defineExpose` 如果子组件需要直接访问父组件实例上的方法，可以通过 `expose` 暴露子组件的方法，并在父组件中获取子组件引用。 #### 父组件示例： ```vue <template> <ChildComponent ref="childRef" /> </template> <script setup> import { ref, onMounted } from &#39;vue&#39;; const childRef = ref(); onMounted(() => { childRef.value.childMethod(); // 子组件暴露的方法 }); </script> ``` #### 子组件示例： ```vue <script setup> import { defineExpose } from &#39;vue&#39;; const childMethod = () => { // 子组件方法 }; defineExpose({ childMethod }); </script> ``` ###