vue3怎么调用子组件的方法

百变鹏仔 3个月前 (10-30) #前端问答

文章标签组件

在 vue 3 中，调用子组件方法有三种方法：通过 refs（使用 $refs 访问实例），通过 v-on 事件绑定（监听自定义事件并触发），以及通过 provide/inject（在父组件中注入，在子组件中获取）。

如何调用 Vue 3 子组件的方法？

在 Vue 3 中，可以通过以下方法调用子组件的方法：

1. 通过 refs：

// 父组件<template><childcomponent ref="child"></childcomponent></template><script>export default {  methods: {    callChildMethod() {      this.$refs.child.someMethod();    }  }}</script>// 子组件<template><button>Click Me</button></template><script>export default {  methods: {    someMethod() {      console.log('Called from child component!');    }  }}</script>

2. 通过 v-on 事件绑定：

立即学习“前端免费学习笔记（深入）”；

// 父组件<template><childcomponent></childcomponent></template><script>export default {  methods: {    callChildMethod(params) {      console.log(`Child method called with params: ${params}`);    }  }}</script>// 子组件<template><button>Click Me</button></template><script>export default {  methods: {    triggerEvent() {      this.$emit('custom-event', 'My parameter');    }  }}</script>

3. 通过 provide/inject：

// 父组件<template><childcomponent></childcomponent></template><script>export default {  provide() {    return {      callChildMethod: this.callChildMethod    };  },  methods: {    callChildMethod() {      console.log('Called from parent component!');    }  }}</script>// 子组件<template><button>Click Me</button></template><script>export default {  inject: ['callChildMethod'],  methods: {    callParentMethod() {      this.callChildMethod();    }  }}</script>

文章推荐

vue3怎么调用子组件的方法

javascript里怎么输入

网页关闭javascript

javascript怎么实现异步

javascript隐藏的元素显示属性

javascript要全部记住吗