vue 父组件调用子组件_react父组件向子组件传值

vue 父组件调用子组件_react父组件向子组件传值Vue中子组件调用父组件的三种方法:1.直接在子组件中通过“this.$parent.event”来调用父组件的方法。父组件<template><div><child></child></div></template><script>importchildfrom’./components/childcomponent’;exportdefault{co

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

Jetbrains全系列IDE稳定放心使用

Vue中子组件调用父组件的三种方法:

1.直接在子组件中通过“this.$parent.event”来调用父组件的方法。

父组件

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

2.子组件用“$emit”向父组件触发一个事件,父组件监听这个事件即可。

父组件

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

3.父组件把方法传入子组件中,在子组件里直接调用这个方法即可。

父组件

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

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

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

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

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

(0)


相关推荐

  • js正则表达式匹配ip地址(ip地址正则表达式验证)

    letreg=/https:\/\/.*\.[0-9]{1,4}(:[\w]+)?/g这个正则匹配的结果如下https://101.122.134.40:8860/aa.bb/aa/ee>https://10.162.123.40:8860https://101.122.134.40/aa.bb/aa/ee>https://101.122.134.40然后替换一下即可letstr=’https://101.122.134.40:8860/aa.bb/aa/ee

  • php开发环境的配置过程_mac配置java环境

    php开发环境的配置过程_mac配置java环境VsCode系列:VSCode配置Python开发环境!今天博主跟大家聊一聊如何使用VsCode系列:VSCode配置Python开发环境!不喜勿喷,如有建议欢迎补充、讨论!关于安装和汉化可以观看博主的这篇文章《下载安装及汉化》以及Python系列:windows10配置Python3.0开发环境!,安装完毕重启VsCode!Comeon!首先请大家确定VsCode的安装以及Pyt…

    2022年10月26日
  • 图像风格迁移_图像风格迁移算法

    图像风格迁移_图像风格迁移算法风格迁移指的是两个不同域中图像的转换,具体来说就是提供一张风格图像,将任意一张图像转化为这个风格,并尽可能保留原图像的内容

    2022年10月21日
  • Ubuntu pycharm创建快捷方式并固定至启动栏(两种方法)

    Ubuntu pycharm创建快捷方式并固定至启动栏(两种方法)Ubuntu20.04/18.04/16.04pycharm创建快捷方式并固定至启动栏

    2022年10月23日
  • 计算机高配表要表格,为何高配电脑还会卡? 因为你没选择FreeSync套装

    计算机高配表要表格,为何高配电脑还会卡? 因为你没选择FreeSync套装可能有很多玩家在网络对战游戏中都遇到如此状况:电脑配置并不低,但游戏画面依然不够顺滑,不但经常卡顿,而且明明先瞄准敌人开枪,敌人没死而自己被秒掉。其实,这并不是因为玩家枪法太菜,问题在很大程度上出在玩家选择的显卡与显示器上。那到底玩家的显卡和显示器上到底有什么问题?让我们为大家分析一下吧。高配电脑可以提供高帧速,但并不一定无卡顿高配置的电脑当然能提供强劲的性能,在游戏中自然可以提供很高的帧速。但为…

  • 2012年计算机工作总结,计算机教师工作总结2011-2012

    2012年计算机工作总结,计算机教师工作总结2011-2012计算机教师工作总结2011-20122010-2011第一学期计算机教学工作总结郑龙勤本学期,我任教24,25,26,27班的计算机应用基础教学,同时兼任学校的中职资助、机房维护等工作。在各位领导和老师的热心支持和帮助下,我认真做好教学工作,积极完成学校布置的各项任务。下面我把2010-2011年第一学期的工作做简要的汇报。一、学校制度执行情况平时积极参加全校教职工会议,认真学习学校下达的文件,关…

发表回复

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

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