【Vue】子组件调用父组件的方法——案例

梦里梦外; 2024-03-17 19:40 13阅读 0赞

好的，以下是一个简单的案例：

父组件 Parent.vue：

<template>
      <div>
        <h2>Parent Component</h2>
        <child-component @text-updated="updateText"/>
        <p>Text from child component: {
       { childText }}</p>
      </div>
    </template>
    
    <script>
    import ChildComponent from './Child.vue';
    
    export default {
      components: {
        ChildComponent
      },
      data() {
        return {
          childText: ''
        }
      },
      methods: {
        updateText(text) {
          this.childText = text;
        }
      }
    }
    </script>

子组件 Child.vue：

<template>
      <div>
        <h2>Child Component</h2>
        <button @click="updateParentText()">Update Parent Text</button>
      </div>
    </template>
    
    <script>
    export default {
      methods: {
        updateParentText() {
          this.$emit('text-updated', 'Text updated from child component');
        }
      }
    }
    </script>

在这个案例中，子组件通过调用 $emit 方法向父组件发送一个自定义事件 text-updated，并传递一个字符串参数来更新父组件中的 childText 数据，从而实现子组件调用父组件的方法。在父组件中，我们监听了 text-updated 事件，并将其对应的处理方法 updateText 定义在父组件中，当子组件调用 $emit 方法时，该方法会被自动触发，从而更新父组件中的数据。

发表评论取消回复

表情：

评论列表（有 0 条评论，13人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue父组件调用子组件方法

组件 <template> <div> child </div> </template> <...

待我称王封你为后i/ 2024年04月17日 19:58/ 0 赞/ 128 阅读

相关【Vue】子组件调用父组件的方法——案例

好的，以下是一个简单的案例：父组件 Parent.vue： <template> <div> <h2>Parent Component

梦里梦外;/ 2024年03月17日 19:40/ 0 赞/ 14 阅读

相关 vue父组件调用子组件方法

[https://www.cnblogs.com/mophy/p/8590291.html][https_www.cnblogs.com_mophy_p_8590291.htm

约定不等于承诺〃/ 2023年06月23日 12:56/ 0 赞/ 46 阅读

相关 VUE_Vue父组件调用子组件方法,uni-app父组件调用子组件方法

//父组件 <template> <div class="home"> <HelloWorld ref="mychild"></He

ゞ浴缸里的玫瑰/ 2022年12月16日 06:15/ 0 赞/ 350 阅读

相关 VUE_vue子组件调用父组件方法，uni-app子组件调用父组件方法

父组件引入组件header <Header @call="call" /> 父组件methods添加方法 call(){ conso

比眉伴天荒/ 2022年12月11日 03:23/ 0 赞/ 303 阅读

相关 Vue子组件调用父组件的方法

Vue中子组件调用父组件的方法，三种方法第一种方法是在子组件中通过this.$parent.event来调用父组件的方法父组件： <template

Dear 丶/ 2022年11月12日 09:47/ 0 赞/ 269 阅读

相关 Vue $parent、子组件调用父组件方法，父组件调用子组件方法

[https://blog.csdn.net/zgrkaka/article/details/100528714][https_blog.csdn.net_zgrkaka_ar

超、凢脫俗/ 2022年10月06日 01:50/ 0 赞/ 347 阅读

相关 vue 父组件调用子组件的方法，子组件调用父组件方法

首先看代码： 1、父组件： <template> <div> <div v-if="!userShow"> 父组件内容区

╰+攻爆jí腚メ/ 2022年04月17日 04:55/ 0 赞/ 632 阅读

相关 vue 父组件调用子组件的方法

一般情况，我们从父组件向子组件传递数据会用props，子组件事件想在父组件中执行可以用$emit。现在父组件想用子组件里的一个方法，那怎么办？在父组件里首先得得到子组件对象

冷不防/ 2022年04月08日 10:10/ 0 赞/ 468 阅读

相关 vue子组件调用父组件方法

说明：有一个组件InputListSelect.vue，选中一个行数据，将该数据传送到父级ProjectEdit.vue文件中 1、父级ProjectEdit.vue调用

桃扇骨/ 2022年02月18日 14:21/ 0 赞/ 434 阅读