Vue 3 子组件方法调用

一、Vue 3 调用子组件方法 child

在 Vue 3 中，为了更好的拆分组件，允许我们定义一个子组件，并且可以通过组件标签的方式去使用它。在像这种组件中，子组件方法调用就显得很重要。在这种情况下，可以使用 $refs 属性来选择子组件，并且调用其方法。

  const ChildComponent = {
    methods: {
      hello() {
        console.log('Hello from ChildComponent!');
      }
    }
  }

  export default {
    components: { ChildComponent },
    methods: {
      callChildMethod() {
        this.$refs.child.hello();
      }
    }
  }

二、Vue 3 调用子组件函数

在 Vue 3 中，函数不再作为组件的方法存在。新的组件函数实际上作为子组件子组件实例的属性，可以通过访问该属性名来调用子组件函数。

  const ChildComponent = {
    setup() {
      const sayHello = () => {
        console.log('Hello from ChildComponent Function!');
      }
      return { sayHello };
    }
  }

  export default {
    components: { ChildComponent },
    methods: {
      callChildFunction() {
        this.$refs.child.sayHello();
      }
    }
  }

三、Vue 3 父组件调用子组件方法

有时我们需要在父组件中去调用子组件方法。Vue 3 给我们提供了可用性 API ，即 provide 和 inject。在父组件中，通过 provide 向下传递数据或者方法，在子组件中通过 inject 可以获取到数据或者方法。

  const ChildComponent = {
    setup(props, { expose }){
      const sayHello = () => {
        console.log('Hello from ChildComponent Function!');
      }
      expose({ sayHello })
      // or
      return { sayHello };
    }
  }

  const ParentComponent = {
    components: { ChildComponent },
    methods: {
      callChildMethod() {
        this.$refs.child.sayHello();
      }
    },
    setup() {
      return { sayHello: inject('sayHello') }
    }
  }

四、Vue 3 ts 调用子组件方法

在 Vue 3 中，我们可以使用 TypeScript 去定义组件并且更好地支持类型检查。在 TypeScript 中调用子组件方法与 JavaScript 中大体相同，需要在 Vue 组件 TypeScript 类型定义中定义 ref 属性，然后可以使用它来调用子组件方法。

  import { defineComponent, ref } from 'vue';

  const ChildComponent = defineComponent({
    methods: {
      hello() {
        console.log('Hello from ChildComponent!');
      }
    }
  });

  export default defineComponent({
    components: { ChildComponent },
    setup() {
      const childRef = ref
   (null);
      return { childRef };
    },
    methods: {
      callChildMethod() {
        this.childRef?.hello();
      }
    }
  });

   

五、Vue 3 父组件调用子组件方法

在 Vue 3 中，父组件调用子组件方法也有两种方式。一种是直接在父组件中获取到子组件实例引用，通过该引用调用子组件方法；另外一种是使用 provide / inject 的方式进行传递。提前告诉大家，第一种方式比较限制，不如第二种方式做得好。

  import { defineComponent, ref } from 'vue';

  const ChildComponent = defineComponent({
    methods: {
      hello() {
        console.log('Hello from ChildComponent!');
      }
    }
  });

  export default defineComponent({
    components: { ChildComponent },
    setup() {
      const childRef = ref
   (null);
      return { childRef };
    },
    mounted() {
      this.childRef = this.$refs.child;
    },
    methods: {
      callChildMethod() {
        this.childRef?.hello();
      }
    }
  });

   

六、Vue 3 子组件调用父组件方法

在 Vue 3 中，子组件如何调用父组件的方法与 Vue 2 中基本相同，但也有一些细微的变化。我们可以向上通过 emit 事件传递数据，使得父组件可以接收到子组件传递的数据。

  const ChildComponent = {
    methods: {
      handleClick() {
        this.$emit('hello');
      }
    }
  };

  const ParentComponent = {
    components: { ChildComponent },
    methods: {
      sayHello() {
        console.log('Hello from ParentComponent!');
      }
    },
    template: '
   

    
   
'
  };

七、Vue 3 父组件调用子组件方法

Vue 3 中，父组件可以通过 ctx.slots.default() 调用子组件方法，并且传递数据。但它只能在父组件的 setup 期间使用。

  import { defineComponent, ref } from 'vue';

  const ChildComponent = defineComponent({
    emits: ['hello'],
    methods: {
      handleClick() {
        this.$emit('hello');
      }
    }
  });

  export default defineComponent({
    components: { ChildComponent },
    setup() {
      const childRef = ref
   (null);
      const sayHello = () => {
        childRef?.handleClick();
      }
      return { childRef, sayHello }
    },
    template: '
    

     
    
'
  });

   

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

Vue 3 和 Vue 2 调用子组件方法的方式有所不同。Vue 3 中，我们需要在组件中为子组件定义一个 ref，并使用 $attrs 将其传递给子组件。子组件在组件中调用其方法，然后我们可以使用 $refs 访问子组件方法。

  const ChildComponent = {
    methods: {
      handleClick() {
        console.log('Hello from ChildComponent!');
      }
    },
    template: '
   
{{ $attrs.called }}
   
'
  };

  const ParentComponent = {
    components: { ChildComponent },
    template: '
   

    
   
',
    mounted() {
      this.$refs.child.handleClick();
    }
  };

总结

在 Vue 3 中，调用子组件方法可以通过多种方式实现，可以使用 provide / inject API ，可以使用 emit / on 事件监听，也可以通过 ref 来进行访问子组件的方法。具体选择哪种方法根据具体情况而定。