Vue3 父子组件互相触发方法
2022/7/3 23:21:47
本文主要是介绍Vue3 父子组件互相触发方法,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
父组件
<template> <el-button type="primary" @click="faEvent">父组件</el-button> <hr /> <!-- 父2子 步骤 1. 定义ref --> <!-- 子2父 步骤 3. 父组件创建自定义事件 --> <SonCpt ref="sonRef" @childEvent="childEvent" /> </template> <script> import { ref } from "vue"; import SonCpt from "./son.vue"; export default { components: { SonCpt }, setup() { // 父2子 步骤 2. 获取引用 const sonRef = ref(); const faEvent = () => { // 父2子 步骤 4. 在某个时机触发子组件方法 sonRef.value.faEvent("我是写在index组件的方法"); }; // 子2父 步骤 4. 父组件创建对应的方法 const childEvent = (v) => { console.log("index里面的函数", v); }; // 父2子 步骤 3. 导出引用, 不导出获取的引用是undefined // 子2父 步骤 7. 父组件导出方法 return { sonRef, faEvent, childEvent }; }, }; </script> <style> </style>
子组件
<template> <el-button type="danger" @click="childEvent">子组建</el-button> </template> <script> export default { props: ["msg"], // 子2父 步骤 1. 结构emit setup(props, { emit }) { // 父2子 步骤 5. 自组建定义方法 const faEvent = (v) => { console.log("子组建的方法, 接收到的内容为:" + v); }; const childEvent = () => { // 子2父 步骤 2.使用emit触发父组件方法 emit("childEvent", "我是写在son里面的msg"); }; // 父2子 步骤 6. 自组建需要导出该方法 return { faEvent, childEvent }; }, }; </script> <style> </style>
这篇关于Vue3 父子组件互相触发方法的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-09-08vue 框架是什么-icode9专业技术文章分享
- 2024-09-07VSCODE 如何调试 react UI 组件源码-icode9专业技术文章分享
- 2024-09-07ANTDesignVue项目实战:从零开始构建高效UI
- 2024-09-07Ant-Design Vue项目实战:从零开始构建高颜值企业级应用
- 2024-09-07【新手入门】Cropper.js项目实战:轻松打造图片裁剪功能
- 2024-09-07Hotkeys.js项目实战:轻松上手键盘快捷键功能
- 2024-09-07NuxtUI项目实战:从零开始构建Vue项目
- 2024-09-06深入理解与高效应用React Hooks:理论与实战
- 2024-09-06NextAuth:为您的Next.js应用快速搭建安全用户认证系统
- 2024-09-06React 入门:快速搭建您的第一个 React 应用