Vue中子组件调用父组件的3种方法实例

2024-04-02 19:04:59 402人浏览独家记忆

摘要

目录1.直接在子组件中通过“this.$parent.event”来调用父组件的方法。2.子组件用“$emit”向父组件触发一个事件,

1.直接在子组件中通过“this.$parent.event”来调用父组件的方法。

父组件

<template>
  <div>
    <child></child>
  </div>
</template>
<script>
  import child from './components/childcomponent';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod() {
        console.log('父组件方法');
      }
    }
  };
</script>

子组件

<template>
  <div>
    <button @click="childMethod()">点击按钮</button>
  </div>
</template>
<script>
  export default {
    methods: {
      childMethod() {
        this.$parent.fatherMethod();
      }
    }
  };
</script>

2.子组件用“$emit”向父组件触发一个事件,父组件监听这个事件即可。

父组件

<template>
  <div>
    <child @fatherMethod="fatherMethod"></child>
  </div>
</template>
<script>
  import child from './components/childcomponent'
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod() {
        console.log('父组件方法');
      }
    }
  };
</script>

子组件

<template>
  <div>
    <button @click="childMethod()">点击按钮</button>
  </div>
</template>
<script>
  export default {
    methods: {
      childMethod() {
        this.$emit('fatherMethod');
      }
    }
  };
</script>

3.父组件把方法传入子组件中,在子组件里直接调用这个方法即可。

父组件

<template>
  <div>
    <child :fatherMethod="fatherMethod"></child>
  </div>
</template>
<script>
  import child from './components/childcomponent';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod() {
        console.log('父组件方法');
      }
    }
  };
</script>

子组件

<template>
  <div>
    <button @click="childMethod()">点击按钮</button>
  </div>
</template>
<script>
  export default {
    props: {
      fatherMethod: {
        type: Function,
        default: null
      }
    },
    methods: {
      childMethod() {
          this.fatherMethod();
        }
      }
    }
  };
</script>

总结

到此这篇关于Vue中子组件调用父组件的3种方法的文章就介绍到这了,更多相关Vue子组件调用父组件内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

--结束END--

本文标题: Vue中子组件调用父组件的3种方法实例

本文链接: https://lsjlt.com/news/149565.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

猜你喜欢

Vue中子组件调用父组件的3种方法实例

目录1.直接在子组件中通过“this.$parent.event”来调用父组件的方法。2.子组件用“$emit”向父组件触发一个事件,...

99+

2024-04-02
Vue子组件调用父组件方法案例详解

一、直接在子组件中通过this.$parent.event来调用父组件的方法  <template> <div> ...

99+

2024-04-02
关于vue父组件调用子组件的方法

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功...

99+

2024-04-02
React父组件调用子组件中的方法实例详解

目录Class组件1. 自定义事件2. 使用 React.createRef()3. 使用回调RefsFunction组件补充：子组件调用父组件方法总结文章中涉及 ref 的应用仅为...

99+

2024-04-02
Vue父组件调用子组件函数实现

Vue父组件调用子组件的函数父组件通过事件调用子组件的函数。例如父组件通过点击事件让子组件发请求。文章中的项目已经通过脚手架去创建。 DEMO: Father.js ...

99+

2024-04-02
分享Vue子组件接收父组件传值的3种方式

目录1.简单声明接收2.接收数据的同时进行类型限制3.接收数据的同时对数据类型、必要性、默认值进行限制父组件代码↓ <template> <...

99+

2024-04-02
Vue中一个组件调用其他组件的方法详解(非父子组件)

目录前言方式一：引用式方式二：vuex1、src/store/index.js2、被使用组件- A 页面（组件）3、使用触发页面-B 页面（组件）方式三：使用事件总线eventBus...

99+

2022-11-13

vue调用其他组件方法 vue组件调用 vue组件之间调用
Vue父子组件传值的三种方法

目录前言一、Vue父子传值的方法二、方法详解1.props / $emit2.$parent / children3.$ref总结提示：文章写完后，目录可以自动生成，如何生成可参考右...

99+

2022-12-20

Vue父子组件传值 Vue父子组件
Vue组件中的父子组件使用

目录Vue组件中的父子组件父组件向子组件传值子组件向父组件传值Vue父子组件的生命周期总结Vue组件中的父子组件父组件向子组件传值父组件通过属性绑定（v-bind:）的形式, 把...

99+

2023-01-28

Vue组件 Vue父子组件 Vue父子组件使用
React父组件怎么调用子组件的方法

本教程操作环境：Windows7系统、react18版、Dell G3电脑。在React中，我们经常在子组件中调用父组件的方法，一般用props回调即可。但是有时候也需要在父组件中调用子组件的方法，通过这种方法实现高内聚。有多种方法，请按需...

99+

2023-05-14

React.js 前端
Vue中父组件向子组件传递数据的几种方法

最近在学习vue的源码，总结了几种vue中父子组件传递数据的方法。 1.props & event 父组件向子组件传递props数据，子组件通过触发事件向父组件回传数据，代...

99+

2024-04-02
Vue子组件监听父组件实例分析

这篇文章主要讲解了“Vue子组件监听父组件实例分析”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Vue子组件监听父组件实例分析”吧！子组件监听父组件值变化子组件中利用watch监听父组件值的...

99+

2023-06-29
react-native 父函数组件调用类子组件的方法(实例详解)

react-native 父函数组件调用类子组件的方法，代码如下所示： import React, {Component} from 'react'; import {Text, V...

99+

2024-04-02
vue父组件调用子组件方法报错问题及解决

目录vue父组件调用子组件方法报错vue父组件调用子组件方法及遇到的问题vue父组件调用子组件方法报错在父组件定义了一个tab标签页，每一个标签页下面都调用不同的组件，如下图所示...

99+

2024-04-02
Flutter 父子组件互调方法

Flutter 父子组件互调方法文章目录 Flutter 父子组件互调方法一、父组件调用子组件方法1、概述2、代码实现3、效果二、子组件调用父组件方法1、概述2、代码实现3、效果 ...

99+

2023-10-02

flutter javascript 前端
Vue中$emit $refs子父组件间方法如何调用

这篇文章将为大家详细讲解有关Vue中$emit $refs子父组件间方法如何调用，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。1、$emit子组件调用父组件的方法并传递数...

99+

2024-04-02
Vue3父子组件互调方法的实现

目录一、父组件调用子组件方法1、子组件2、父组件3、测试结果4、关于 defineExpose 的官方文档二、子组件调用父组件方法1、子组件2、父组件3、测试结果4、关于 defin...

99+

2024-04-02
Vue父组件和子组件之间数据传递和方法调用

vue组件在通信中，无论是子组件向父组件传值还是父组件向子组件传值，他们都有一个共同点就是有中间介质，子向父的介质是自定义事件，父向子的介质是props中的属性。父组件向子组件传值...

99+

2022-12-14

Vue 父组件向子组件传递数据 vue子组件向父组件传值
vue通过子组件修改父组件prop的多种实现方式

目录前言常用方式1. 通过父组件on监听子组件emit事件实现修改prop2. 通过父组件sync修饰符 + 子组件emit事件实现修改prop取巧方式3.通过data实现修改pro...

99+

2024-04-02
React父组件如何调用子组件

本篇内容介绍了“React父组件如何调用子组件”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！调用方法：1、类组件中的调用可以利用React....

99+

2023-07-04