vue 父组件调用子组件的函数_vue父组件调用子组件属性

vue 父组件调用子组件的函数_vue父组件调用子组件属性第一种方法直接在子组件中通过this.$parent.event来调用父组件的方法父组件<template><div><child></child></div></template><script>importchildfrom’./components/dam/…

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

Jetbrains全系列IDE稳定放心使用

第一种方法

直接在子组件中通过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>

子组件 更简便的写法

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

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

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

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


相关推荐

  • Matlab读取txt数据的实用方法[通俗易懂]

    Matlab读取txt数据的实用方法[通俗易懂]需求有个朋友需要我帮忙写个matlab脚本读取100个txt文档的实验数据,这些文档的结构相同,分为四列,从第一列到第四列依次是时间、位置、速度、加速度。读取完数据之后需要对数据进行处理,具体的处理方式是:提取以0.002为采样周期的数据,分类存储起来。文件内容是这样的:技术难点技术难点在于,这些文件中的数据是从一个软件中仿真得到的,由于采用的是变步长仿真,因此采样时间不统一,很难采用对…

    2022年9月6日
    6
  • larave5.6 将Excel文件数据导入数据库代码实例

    larave5.6 将Excel文件数据导入数据库代码实例

    2021年10月24日
    41
  • windows7/windows10 虚拟显示器部署(Virtual monitor)

    最近有些网友看了我之前的博客之后,向我要虚拟显示器的bin文件,由于之前代码是绑定在VDI下的,没有单独的虚拟显示器代码,所以抽空提取了下相关代码,单独编译。网盘:https://pan.baidu.com/s/1vdqm0Is9pjAcG40Qf_q7cw有问题加QQ3505459047咨询。总结了下网友的一些用途,这几种情况下使用虚拟显示器(显卡欺骗器功能的软件)可以解决:…

    2022年4月5日
    1.2K
  • java 取余和取模运算之间的区别「建议收藏」

    java 取余和取模运算之间的区别「建议收藏」转自lee371042https://blog.csdn.net/lee371042/article/details/102553342packageOperator;importjava.math.BigInteger;/***假如有两个数:*amod(b)与a%b,b为正整数,*一种叫a对b取模,另一个叫a对b取余,两种叫法有什么区别呢?*通常情况下,取模运算也叫取余运算,*它们返回的结果都是一个数对另一个数的余数,**区别在于当a是一

    2022年6月3日
    35
  • Java数组(Array)

    Java数组(Array)数组(Array),是多个相同类型数据一定顺序排列的集合,并使用一个名字命名,并通过编号的方式对这些数据进行统一管理。数组相关的概念:数组名元素角标、下标、索引数组的长度:元素的个数数组的特点:数组是按序排列的数组属于引用数据类型的变量。数组的元素,既可以是基本数据类型,也可以是引用数据类型创建数组对象会在内存中开辟一整块连续的空间数组的长度一旦确定,就不能修改。数组…

    2022年7月8日
    24
  • python zipfile.zipfile_python解析json文件

    python zipfile.zipfile_python解析json文件从简单的角度来看的话,zip格式会是个不错的选择,而且python对zip格式的支持够简单,够好用。1)简单应用如果你仅仅是希望用python来做压缩和解压缩,那么就不用去翻文档了,这里提供一个简单的用法,让你一看就能明白。importzipfilef=zipfile.ZipFile(‘filename.zip’,’w’,zipfile.ZIP_DEFLATED)f.write(‘fil…

    2022年9月17日
    4

发表回复

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

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