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>

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

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

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

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

(0)


相关推荐

  • javascript 浮动广告 代码 类

    javascript 浮动广告 代码 类DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>HTML> HEAD>  TITLE> javascript 浮动广告代码 TITLE> HEAD> BODY>   position:absolute; –>div id=sign1 style=cursor:hand;>a href=http://www.16

  • sql文件导入数据库变乱码_sql查询的汉字乱码是怎么办

    sql文件导入数据库变乱码_sql查询的汉字乱码是怎么办首先建立同名空数据库1.用记事本(或UE)打开刚才的导出的SQL文件;2.另存此文件——打开另存为对话框,选择对话框中的编码格式为UNICODE编码;3.保存文件,然后CTRL+A,全选;4.复制里面的SQL语句到SQLyog中的“SQL编码器”当中,再执行一次SQL语句;5.执行完成后切记刷新一次,查看中文的数据表,乱码消除,大功告成;…

  • Java基准测试工具JMH使用

    Java基准测试工具JMH使用JMH,即JavaMicrobenchmarkHarness,这是专门用于进行代码的微基准测试的一套工具API。JMH由OpenJDK/Oracle里面那群开发了Java编译器的大牛们所开发。何谓MicroBenchmark呢?简单地说就是在方法层面上的benchmark,精度可以精确到微秒级。本文主要介绍了性能基准测试工具JMH,它可以通过一些功能来规避由JVM中的JIT或者其他优化对性能测试造成的影响。

  • 秒懂,Java 注解 (Annotation)你可以这样学

    秒懂,Java 注解 (Annotation)你可以这样学文章开头先引入一处图片。这处图片引自老罗的博客。为了避免不必要的麻烦,首先声明我个人比较尊敬老罗的。至于为什么放这张图,自然是为本篇博文服务,接下来我自会说明。好了,可以开始今天的博文了。Annotation中文译过来就是注解、标释的意思,在Java中注解是一个很重要的知识点,但经常还是有点让新手不容易理解。我个人认为,比较糟糕的技术文档主要特征之一就是:用专业名词来…

  • ExecuteScalar 返回值

    ExecuteScalar 返回值ExecuteScalar 执行查询,并返回查询所返回的结果集中第一行的第一列。忽略额外的列或行Execute=执行;scalar=数量;so,从字面意思来讲,可将ExecuteScalar和ExecuteNonQuery对比来学习。ExecuteScalar()方法的作用是:执行查询,并返回查询所返回的结果集中第一行的第一列。所有其他的列和行将被忽略。

  • linux 如何安装whl文件,linux安装whl文件

    linux 如何安装whl文件,linux安装whl文件Windows环境:安装whl包:pipinstallwheel->pipinstall**.whl下载whl文件MySQL_python-1.2.5-cp27-none-win32.whlMySQL_python-1.2.5-cp27-none-win_amd64.whl执行pipinstallMySQL_python-1.2.5-cp27-none-win3…

发表回复

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

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