如何调用 vue 子组件函数?插槽属性:子组件定义插槽属性,父组件传入方法,子组件监听插槽事件并调用父组件方法。refs:父组件使用 ref 引用子组件,然后通过引用访问子组件方法。**$emit:**子组件通过 $emit 发射自定义事件,父组件监听事件并执行操作。provide/inject:父组件通过 provide 提供数据或方法,子组件通过 inject 注入数据或方法。
如何调用 Vue 子组件函数
Vue 中的子组件可以调用其父组件的方法,也可以调用自己的方法。以下是如何实现的:
调用父组件方法
- 使用插槽属性:在子组件中定义一个插槽属性,并传入父组件的方法。父组件可以向插槽传递值和事件,子组件可以监听插槽事件并调用父组件的方法。
<!-- 父组件 -->
<mycomponent><template v-slot:my-slot="props"><button>调用父组件方法</button>
</template></mycomponent><!-- 子组件 --><template><slot name="my-slot" :myfunction="myFunction"></slot></template><script>
export default {
methods: {
myFunction() {
console.log('子组件调用了父组件方法');
}
}
};
</script>
- 使用 refs:在父组件中使用 ref 引用子组件,然后通过该引用访问子组件的方法。
<!-- 父组件 -->
<template><mycomponent ref="myComponent"></mycomponent></template><script>
export default {
mounted() {
this.$refs.myComponent.myFunction(); // 调用子组件方法
}
};
</script><!-- 子组件 --><template><button>调用子组件方法</button>
</template><script>
export default {
methods: {
myFunction() {
console.log('子组件方法被调用');
}
}
};
</script>
调用子组件方法
- **使用 $emit:**在子组件中使用 $emit 发射一个自定义事件,并传递数据作为参数。父组件可以监听该事件并执行相应的操作。
<!-- 子组件 -->
<template><button>调用子组件方法</button>
</template><script>
export default {
methods: {
emitMyEvent() {
this.$emit('my-event', { data: '从子组件传递的数据' });
}
}
};
</script><!-- 父组件 --><template><mycomponent></mycomponent></template><script>
export default {
methods: {
handleMyEvent(event) {
console.log(event.data); // 接收从子组件传递的数据
}
}
};
</script>
- 使用 provide/inject:父组件使用 provide 提供数据或方法,子组件使用 inject 注入数据或方法。
<!-- 父组件 -->
<template><provide :mymethod="myMethod"><mycomponent></mycomponent></provide></template><script>
export default {
provide() {
return {
myMethod: this.myMethod
};
},
methods: {
myMethod() {
console.log('父组件方法被调用');
}
}
};
</script><!-- 子组件 --><template><button>调用父组件方法</button>
</template><script>
export default {
inject: ['myMethod'],
methods: {
callMyMethod() {
this.myMethod();
}
}
};
</script>