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)


相关推荐

  • SVM和logistic regression的一些对比

    SVM和logistic regression的一些对比

  • Flowable API

    Flowable APIFlowableAPI 流程引擎API与服务引擎API是与Flowable交互的最常用手段。总入口点是ProcessEngine。可以使用多种方式创建。使用ProcessEngine,可以获得各种提供工作流/BPMN方法的服务。它是线程安全的,可以在服务器中保存并共用一个引用。  ProcessEngineprocessEngine=ProcessEngine…

  • 启动ucosii之四OSTaskCreate()[通俗易懂]

    启动ucosii之四OSTaskCreate()[通俗易懂]函数原型来自OS_TASK.C/***********************************************************************************************************                                           CREATEATASK**************

  • Pycharm中安装Pygame方法「建议收藏」

    Pycharm中安装Pygame方法「建议收藏」本文转自:https://blog.csdn.net/zhangffyy/article/details/78524592第一步:打开Pycharm第二步:点File-&amp;amp;amp;gt;DefaultSettings-&amp;amp;amp;gt;ProjectInterpreter-&amp;amp;amp;gt;点加号第三步:搜索Pygame-&amp;amp;amp;gt;InstallPackage然后就安装好了,新建一个p

  • VC 6 编译时一直处于Linking…状态,无响应

    VC 6 编译时一直处于Linking…状态,无响应

  • pycharm打包python项目_pycharm 打包与在线上传文件「建议收藏」

    pycharm打包python项目_pycharm 打包与在线上传文件「建议收藏」大致分为以下两部分1.本地操作将包文件按照标准格式进行规范处理、打包备份项目开发过程中:经常会涉及到备份操作常规:通过tar命令,将程序文件压缩备份较常见:可以通过系统提供的打包操作,将文件自动按照标准化格式存储2.远程操作[专门用于协同]将包文件进行标准化构建将包文件进行打包处理上传发布到网络上具体操作以下以一个例子作为说明image.png1。在包文件中,添加一个构建模块setup.pyim…

发表回复

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

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