如何调用 Vue 子组件函数?插槽属性:子组件定义插槽属性,父组件传入方法,子组件监听插槽事件并调用父组件方法。refs:父组件使用 ref 引用子组件,然后通过引用访问子组件方法。**$emit:**子组件通过 $emit 发射自定义事件,父组件监听事件并执行操作。provide/inject:父组件通过 provide 提供数据或方法,子组件通过 inject 注入数据或方法。
如何调用 Vue 子组件函数
Vue 中的子组件可以调用其父组件的方法,也可以调用自己的方法。以下是如何实现的:
调用父组件方法
<!-- 父组件 --> <MyComponent> <template v-slot:my-slot="props"> <button @click="props.myFunction()">调用父组件方法</button> </template> </MyComponent> <!-- 子组件 --> <template> <slot name="my-slot" :myFunction="myFunction"></slot> </template> <script> export default { methods: { myFunction() { console.log('子组件调用了父组件方法'); } } }; </script>
<!-- 父组件 --> <template> <MyComponent ref="myComponent"></MyComponent> </template> <script> export default { mounted() { this.$refs.myComponent.myFunction(); // 调用子组件方法 } }; </script> <!-- 子组件 --> <template> <button @click="myFunction()">调用子组件方法</button> </template> <script> export default { methods: { myFunction() { console.log('子组件方法被调用'); } } }; </script>
调用子组件方法
立即学习“前端免费学习笔记(深入)”;
<!-- 子组件 --> <template> <button @click="emitMyEvent()">调用子组件方法</button> </template> <script> export default { methods: { emitMyEvent() { this.$emit('my-event', { data: '从子组件传递的数据' }); } } }; </script> <!-- 父组件 --> <template> <MyComponent @my-event="handleMyEvent"></MyComponent> </template> <script> export default { methods: { handleMyEvent(event) { console.log(event.data); // 接收从子组件传递的数据 } } }; </script>
<!-- 父组件 --> <template> <provide :myMethod="myMethod"> <MyComponent></MyComponent> </provide> </template> <script> export default { provide() { return { myMethod: this.myMethod }; }, methods: { myMethod() { console.log('父组件方法被调用'); } } }; </script> <!-- 子组件 --> <template> <button @click="callMyMethod()">调用父组件方法</button> </template> <script> export default { inject: ['myMethod'], methods: { callMyMethod() { this.myMethod(); } } }; </script>
以上就是vue子组件函数怎么调用的详细内容,更多请关注php中文网其它相关文章!
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号