vue 父组件调用子组件的方法,vue父组件操作子组件的方法

　　本文主要介绍了vue3.0在子组件中触发父组件功能的方式，具有很好的参考价值。希望对你有帮助。如有错误或不足之处，请不吝赐教。

目录

　　模式-子组件父组件模式子组件父组件注意：本文基于vue3.0的语法。

方式一

　　引入define MIT，将{ defineEmit }从‘vue’导入脚本；通过defineEmit定义事件，例如：const emit=define emit([ my click ])；子组件定义ClickEmit事件并返回函数。在click事件中，它通过emit(myclick )将事件传递给父组件。具体代码如下。

子组件

　　模板

　　//我调度了事件，命名为myclick，连接到父组件。

　　button @ click= Emit( my click ) Emit/button

　　//我没有分发任何东西。

　　按钮无发射/按钮

　　/模板

　　脚本设置

　　从“vue”导入{ defineEmit }

　　//定义调度事件

　　const emit=define emit([ my click ])

　　/脚本

父组件

　　模板

　　//子组件使用通信的@myclick事件使用父组件函数

　　hello world @ my click= on cyclick /

　　/模板

　　脚本设置

　　//导入子组件

　　从导入HelloWorld。/components/hello world . vue ；

　　//子组件使用父组件函数。

　　const on cyclick=()={

　　console.log(来自HelloWorld！);

　　}

　　/脚本

方式二

　　首先获取上下文对象，通过对象的emit()方法发出事件。其他同上。

子组件

　　模板

　　按钮@ click= emit click emit click/button

　　/模板

　　脚本设置

　　从“vue”导入{ useContext }

　　//获取上下文

　　const CTX=use context()；

　　const emitclick=()={

　　CTX . emit( my click )；

　　}

　　/脚本

父组件

　　模板

　　//子组件使用通信的@myclick事件使用父组件函数

　　hello world @ my click= on cyclick /

　　/模板

　　脚本设置

　　从导入HelloWorld。/components/hello world . vue ；

　　const on cyclick=()={

　　console.log(来自HelloWorld！);

　　}

　　/脚本

　　以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。