在
Vue中,子
组件可以通过两种方式调用父
组件的
方法和传递参数。
第一种方式是使用$emit
方法。子
组件可以通过this.$emit("父
组件传递过来的函数","子
组件数据")来触发父
组件函数。在子
组件的
方法中,可以使用this.$emit
方法来触发父
组件传递过来的函数,并通过参数传递子
组件的数据。例如,在子
组件的template中可以使用<button @click="childFun">子
组件按钮</button>来调用子
组件的
方法childFun,在childFun
方法中使用this.$emit("fatherMethod","子
组件数据")来触发父
组件的
方法,并传递子
组件的数据。
第二种方式是使用$parent
属性。子
组件可以通过this.$parent.parentFun来调用父
组件的
方法。在子
组件的
方法中,可以使用this.$parent.parentFun来调用父
组件的
方法,并传递子
组件的数据。例如,在子
组件的template中可以使用<button @click="childFun">子
组件按钮</button>来调用子
组件的
方法childFun,在childFun
方法中使用this.$parent.parentFun("子
组件数据")来调用父
组件的
方法。
所以,子
组件可以通过上述两种方式来调用父
组件的
方法并传递参数。这样能够实现子
组件与父
组件之间的数据传递和交互。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
引用[.reference_title]
- *1* *2*
Vue子
组件怎么调用父
组件的
方法 Vue子
组件调用父
组件函数的三种
方法[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *3*
vue父
组件中调用子
组件函数的
方法[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]
到此这篇前端的 工程化(前端工程化:基于 Vue.js 3.0 的设计与实践)的文章就介绍到这了,更多相关内容请继续浏览下面的相关 推荐文章,希望大家都能在编程的领域有一番成就!版权声明:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符,请将相关资料发送至xkadmin@xkablog.com进行投诉反馈,一经查实,立即处理!
转载请注明出处,原文链接:https://www.xkablog.com/qdvuejs/45534.html