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)


相关推荐

  • ios输入框失去焦点_input去边框

    ios输入框失去焦点_input去边框如何解决ios下input框获取焦点时无法弹起的问题

  • java 软连接_螺栓软连接与硬链接

    java 软连接_螺栓软连接与硬链接1.Linux链接概念Linux链接分两种,一种被称为硬链接(HardLink),另一种被称为符号链接(SymbolicLink)。默认情况下,ln命令产生硬链接。【硬连接】硬连接指通过索引节点来进行连接。在Linux的文件系统中,保存在磁盘分区中的文件不管是什么类型都给它分配一个编号,称为索引节点号(InodeIndex)。在Linux中,多个文件名指向同一索引节点是存在的。一般这种连…

  • 用AVX2指令集优化整形数组求和

    用AVX2指令集优化整形数组求和用AVX2指令集优化高精度加法一、AVX2指令集介绍二、代码实现1.普通高精度加法2.AVX2加速高精度加法3.实现细节说明三、性能测试测试环境计时方式测试内容测试命令测试结果四、总结个人推断原因:一、AVX2指令集介绍AVX2是SIMD(单指令多数据流)指令集,支持在一个指令周期内同时对256位内存进行操作。包含乘法,加法,位运算等功能。下附Intel官网使用文档。Intel®IntrinsicsGuide我们本次要用到的指令是__m256i_mm256_add_epi8(__m2

  • ViewPager 2 使用讲解「建议收藏」

    ViewPager 2 使用讲解「建议收藏」之前早有耳闻Google为我们提供新的控件来替换老旧的ViewPager进而解决一些不好解决的bug问题,巴拉巴拉一大堆,就是前因后果啥的…相信读者已经在“张鸿洋”大神、“郭霖”大神或者是其他Android大佬的公众号那里看见了许许多多了,或许各位感觉很无聊了,笔者菜鸟,分析不了历史背景,也不是很懂源码,但是小菜鸟,可以带给位看官尝个鲜,教你怎么用,怎么上手哈,闲话不多说,我们步入正题。…

  • 1_项目搭建

    1_项目搭建数据库父工程1、建Module:supergo_parent2、改pom<?xmlversion=”1.0″encoding=”UTF-8″?><projectxmlns=”http://maven.apache.org/POM/4.0.0″xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance”xsi:schemaLocation=”http://maven.apache.org/POM/4.

  • Java锁的概念「建议收藏」

    Java锁的概念「建议收藏」一:悲观锁在Java中,synchronized和lock锁都是悲观锁。定义:悲观锁认为自己在使用数据的时候一定有别的线程来修改数据,因此在获取数据的时候会先加锁,确保数据不会被别的线程修改二:乐观锁定义:认为自己在使用数据时不会有别的线程修改数据,所以不会添加锁,只是在更新数据的时候去判断之前有没有别的线程更新了这个数据。如果这个数据没有被更新,当前线程将自己修改的数据成功写入。如果数据已经被其他线程更新,则根据不同的实现方式执行不同的操作(例如报错或者自动重试)。乐观锁在Java中.

发表回复

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

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