Vue子组件调用父组件的方法「建议收藏」

Vue子组件调用父组件的方法「建议收藏」Vue中子组件调用父组件的方法,这里有三种方法提供参考第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法父组件<template><div><child></child></div></template><script>importc…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

Vue中子组件调用父组件的方法,这里有三种方法提供参考

第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法

父组件

<template>
  <div>
    <child></child>
  </div>
</template>
<script>
  import child from '~/components/dam/child';
  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>

第二种方法是在子组件里用$emit向父组件触发一个事件,父组件监听这个事件就行了。

父组件
 

<template>
  <div>
    <child @fatherMethod="fatherMethod"></child>
  </div>
</template>
<script>
  import child from '~/components/dam/child';
  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>

第三种是父组件把方法传入子组件中,在子组件里直接调用这个方法

父组件

<template>
  <div>
    <child :fatherMethod="fatherMethod"></child>
  </div>
</template>
<script>
  import child from '~/components/dam/child';
  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() {
        if (this.fatherMethod) {
          this.fatherMethod();
        }
      }
    }
  };
</script>

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/186531.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • ARM基础了解_arm编程架构

    ARM基础了解_arm编程架构ARM处理器家族早起经典处理器包括ARM7、ARM9、ARM11等,Cortex-A系列是它们的升级版从ARM11之后就变成了Cortex系列Cortex-M系列控制为单片机驱动的系统提供的低成本优化方案,应用于传统的微控制器市场,智能传感器,汽车周边部件等。Cortex-A系列处理针对开放式操作系统的高性能处理器,可以跑Android、Linux等系统,应用于智能手…

  • 两地三中心是什么意思「建议收藏」

    两地三中心是什么意思「建议收藏」两地三中心随着IT应用的快速发展,金融,银行,政府等越来越多的用户要求核心业务7*24不断网,不断电持续运行,进而出现了两地三中心的方案,是一些大型企业因为大自然的灾害而在同城选择两个机房异地选择一个机房而组成的称两地三中心,这样的方案具备高可用和灾难备份能力。同城双机房指的是在同一个城市或相邻的城市建立两个相同的系统,双中心具备等同的业务处理能力并通过高速链路实时数据同步,日常情况下可同时分…

  • pycharm企业版激活码[在线序列号]

    pycharm企业版激活码[在线序列号],https://javaforall.cn/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

  • idea查看接口的实现类的方法_进入接口

    idea查看接口的实现类的方法_进入接口shift+alt+B可进入实现类方法

  • roc曲线的意义_Pre / Rec / ROC / PR「建议收藏」

    roc曲线的意义_Pre / Rec / ROC / PR「建议收藏」Precision和Recall值是既矛盾又统一的两个指标,为了提高Precision值,分类器需要尽量在“更有把握”时(即,提高分类阈值!)才把样本预测为正样本,但此时往往会因为过于保守而漏掉很多“没有把握”的正样本,导致Recall值降低。ROC(ReceiverOperatorCharacteristic)曲线被广泛应用于二分类问题中来评估分类器的可信度,但是当处理一…

  • 怎么保存退出 vim 编辑

    怎么保存退出 vim 编辑保存命令按ESC键跳到命令模式,然后::w保存文件但不退出vim:wfile将修改另外保存到file中,不退出vim:w!强制保存,不推出vim:wq保存文件并退出vim:wq!强制保存文件,并退出vimq:不保存文件,退出vim:q!不保存文件,强制退出vim:e!放弃所有修改,从上次保存文件开始再编辑本文来自ij2155的CSDN博客…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号