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>

 

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

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

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • Git 两分钟指南

    Git 两分钟指南

    2021年9月3日
    43
  • Python中字符串String去除出换行符(\n,\r)和空格的问题

    Python中字符串String去除出换行符(\n,\r)和空格的问题Python中字符串String去除出换行符和空格的问题(\n,\r)在Python的编写过程中,获取到的字符串进场存在不明原因的换行和空格,如何整合成一个单句,成为问题。方法:一、去除空格“·”代表的为空格  strip()"···xyz···".strip()#returns"xyz""···xyz···".lstrip()…

    2022年5月2日
    50
  • XX高校校园网网络规划与设计_职业生涯规划word文档

    XX高校校园网网络规划与设计_职业生涯规划word文档一.设计要求该网络至少需要有9个网段(每个网段至少2台主机(两个IP地址)),每个网段的起始地址段为:192.168.开头,第三位是你的学号,比如:你的学号是18,则你的地址段为:192.168.18.开头。拓扑图至少有5台路由器,核心层为2台三层交换机,汇聚层3台交换机,接入层6台交换机。本设计模拟一个校园网的规划与设计,该校园有三个园区,东区、南区和北区。园区网外部路由(东区、南区和北区路由器)之间的链路层协议选用PPP、路由协议选用rip。园区网边界路由器启用NAT技术。画出网络拓扑图。

    2022年10月6日
    2
  • java 汉字乱码_Java中文乱码问题

    java 汉字乱码_Java中文乱码问题一、MyEclipse下的java文件中文乱码问题(MyEclipse6.5):解决方法一:Window–àPreferences…–àGeneral–àContentTypes–àText–àJavaSourceFile中Defaultencoding改写成UTF-8(你所需的编码类型)然后Update,OK确定就可以了。二、1、编码编码比较常用的有:UTF-…

    2022年7月13日
    30
  • nginx负载均衡原理

    nginx负载均衡原理负载均衡在服务端开发中算是一个比较重要的特性。因为Nginx除了作为常规的Web服务器外,还会被大规模的用于反向代理前端,因为Nginx的异步框架可以处理很大的并发请求,把这些并发请求hold住之后就可以分发给后台服务端(backendservers,后面简称backend)来做复杂的计算、处理和响应,并且在业务量增加的时候可以方便地扩容后台服务器。负载均衡可以分为硬件负载均衡和软件负载均衡…

    2022年6月24日
    30
  • ImageView ScaleType 解析

    ImageView ScaleType 解析publicstaticenumScaleType{MATRIX,FIT_XY,FIT_START,FIT_CENTER,FIT_END,CENTER,CENTER_CROP,CENTER_INSIDE;private…

    2022年6月21日
    25

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

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