Vue调用子组件的方法

一、Vue父组件调用子组件的方法

Vue父组件调用子组件的方法可以通过在父组件中使用ref属性进行引用。在父组件内部可以使用$refs访问子组件的实例，然后直接调用组件实例中的方法。

  
   // 子组件代码
   export default {
     methods: {
       sayHello() {
         alert('Hello World!');
       }
     }
   }

   // 父组件代码
   
   
  

二、Vue调用子组件方法报错

如果在Vue中调用子组件方法报错，可能是因为子组件还未被挂载或者子组件的实例不存在，可以通过Vue提供的$nextTick方法来解决该问题。

  
   // 子组件代码
   export default {
     data() {
       return {
         message: 'Hello World!'
       }
     }
   }

   // 父组件代码
   
   
   <script>
     export default {
       methods: {
         callChildMethod() {
           this.$nextTick(() => {
             this.$refs.child.showAlert();
           });
         }
       }
     }
   </script>
  

三、Vue3父组件调用子组件方法

在Vue3中，父组件调用子组件的方法可以使用Vue Composition API 中提供的ref和teleport进行实现。需要注意的是，Vue3中不支持使用$refs直接获取子组件实例，需要使用ref和teleport提供的方法来获取。

  
   // 子组件代码
   
   
   <script>
     import { defineComponent } from 'vue';
     export default defineComponent({
       name: 'ChildComponent',
       props: {
         message: {
           type: String,
           required: true
         }
       },
       setup(props) {
         const showAlert = () => {
           alert('Hello World!');
         }
         return {
           showAlert
         }
       }
     });
   </script>

   // 父组件代码
   
   
   <script>
     import { ref, defineComponent } from 'vue';
     import { useTeleport } from '@vueuse/core';

     import ChildComponent from './ChildComponent.vue';

     export default defineComponent({
       name: 'ParentComponent',
       components: {
         ChildComponent
       },
       setup() {
         const message = ref('Hello World!');
         const childRef = ref(null);
         const callChildMethod = () => {
           childRef.value.showAlert();
         }
         useTeleport('body');

         return {
           message,
           childRef,
           callChildMethod
         }
       }
     });
   </script>
  

四、Vue子组件如何隔代调用方法

在Vue中，子组件调用父组件的方法比较简单。但是，如果需要在子组件中调用祖先组件的方法，就需要利用事件派发和监听来实现。

  
   // 子组件代码
   
   
   <script>
     export default {
       inject: ['ancestorMethod'],
       data() {
         return {
           message: 'Hello World!'
         }
       },
       methods: {
         callAncestorMethod() {
           this.ancestorMethod();
         }
       }
     }
   </script>

   // 祖先组件代码
   
   
   <script>
     export default {
       methods: {
         ancestorMethod() {
           alert('Hello World!');
         }
       }
     }
   </script>
  

五、Vue调用子组件方法显示undefined

当在Vue中调用子组件的方法时，如果该方法未被定义，那么会在控制台上显示undefined，这可能是因为没有将该方法定义在子组件的methods选项中。

  
   // 子组件代码
   export default {
     props: ['message']
   }

   // 父组件代码
   
   
  

六、Vue父组件调用子组件中的方法

父组件可以通过子组件的props属性传递方法，然后在子组件内部调用该方法。这种方式适用于父组件需要控制子组件中的某些行为时使用。

  
   // 子组件代码
   
   
   <script>
     export default {
       props: {
         sendMessage: {
           type: Function,
           required: true
         }
       }
     }
   </script>

   // 父组件代码
   
   
   <script>
     export default {
       methods: {
         showAlert() {
           alert('Hello World!');
         }
       }
     }
   </script>
  

七、Vue调用子组件方法

如果需要在Vue中调用子组件的方法，可以通过将子组件实例设置为父组件的属性，然后在父组件中调用该属性的方法。

  
   // 子组件代码
   export default {
     methods: {
       showAlert() {
         alert('Hello World!');
       }
     }
   }

   // 父组件代码
   
   
   <script>
     import ChildComponent from './ChildComponent.vue';

     export default {
       components: {
         ChildComponent
       },
       data() {
         return {
           child: null
         }
       },
       mounted() {
         this.child = this.$refs.child;
       }
     }
   </script>
  

八、Vue父调用子组件方法

在Vue中，父组件调用子组件的方法可以通过将子组件实例保存在父组件的data中，然后通过this调用子组件的方法实现。

  
   // 子组件代码
   export default {
     methods: {
       showAlert() {
         alert('Hello World!');
       }
     }
   }

   // 父组件代码
   
   
   <script>
     import ChildComponent from './ChildComponent.vue';

     export default {
       components: {
         ChildComponent
       },
       data() {
         return {
           child: null
         }
       },
       mounted() {
         this.child = this.$refs.child;
       },
       methods: {
         callChildMethod() {
           this.child.showAlert();
         }
       }
     }
   </script>
  

九、Vue怎么调用子组件的方法

要调用子组件的方法，需要先在父组件通过ref获取到子组件的实例，然后在父组件的方法中使用该实例来调用子组件中的方法。

  
   //子组件代码
   
   
   <script>
    export default {
      props: ["info"],
      mounted() {
        console.log("mounted");
      },
      methods: {
        showInfo() {
          alert(this.info);
        }
      }
    };
   </script>

   //父组件代码
   
   
   <script>
    import myComponent from "@/components/my-component.vue";
    export default {
      components:{
        "my-component":myComponent,
      },
      data() {
        return {
          myInfo: "Hello World from Child!"
        };
      },
      methods: {
        showInfoFromChild() {
          this.$refs.myComponent.showInfo();
        }
      }
    };
   </script>
  

十、Vue子组件获取父组件的值

子组件获取父组件的值可以通过props属性和$emit方法进行实现。在父组件中给子组件绑定props属性，然后在子组件中通过this.$emit方法触发父组件中的自定义事件，同时将需要传递的参数作为参数传递。

  
   // 父组件代码
   
   
   <script>
     import ChildComponent from './ChildComponent.vue';

     export default {
       components: {
         ChildComponent
       },
       data() {
         return {
           message: 'Hello World!'
         }
       },
       methods: {
         getMsg(msg) {
           alert('Received message: ' + msg);
         }
       }
     }
   </script>

   // 子组件代码
   
   
   <script>
     export default {
       props: ['message'],
       methods: {
         sendMessage() {
           this.$emit('get-message', this.message);
         }
       }
     }
   </script>