首页 > 其他分享 >父子组件如何互相调用接收值?

父子组件如何互相调用接收值?

时间:2023-09-23 23:04:54浏览次数:35  
标签:调用 函数 fatherFun 点击 props 组件 接收

父组件调用子组件



子组件调用父组件

<child :fatherFun="handleFatherFun"><child>

子组件调用父组件的方法

$emit()

<div @click="childClick">点击调用父组件函数</div>

childClick() {//子组件点击
	this.$emit('fatherFun');//父组件的函数名
}

<child :father-fun="handleFatherFun"></child>

props 父元素使用props传值,父元素引用变量用命名-连接,不用驼峰 可以自定义type

<div @click="childCheck">点击调用父组件函数</div>
props: {
	fatherFun: {type: Function}
},
methods: {
	childClick() {
  	this.fatherFun();//父组件传过来的函数
  }
}

$parent

this.$prent.fatherFun();

标签:调用,函数,fatherFun,点击,props,组件,接收
From: https://blog.51cto.com/u_15694202/7581405

相关文章

  • Hadoop是什么? Hadoop是一个由Apache开发的开源分布式计算框架,它能够处理大规模数据并
    Hadoop是什么?Hadoop是一个由Apache开发的开源分布式计算框架,它能够处理大规模数据并行处理任务,支持大规模数据存储和处理。Hadoop的核心组件包括分布式文件系统HDFS和分布式计算框架MapReduce,它们使得Hadoop可以在廉价的硬件上并行地处理大量数据。Hadoop还包括很多相关的项目和子......
  • crash —— 如何获取某个系统调用入口代码?
    通过sys命令可以获取当前系统的系统调用的信息:crash>sys-cNUMSYSTEMCALLFILEANDLINENUMBER0__x64_sys_read../fs/read_write.c:6211__x64_sys_write../fs/read_write.c:6462__x64_sys_open../f......
  • 调用组件三部曲
    现有一个Footer的组件进行调用:<Footer></Footer>importFooterfrom'@/components/base/footer'components:{CereHeader,SiteNav,Footer}......
  • uniapp,微信小程序确认收货组件的使用
    直接上代码//拉起确认收货组件if(wx.openBusinessView){wx.openBusinessView({businessType:'weappOrderConfirm',extraData:{//merchant_id:'1230000109',//用户交易商户号//merchant_trade_no:"1234323JKHDFE1243252",//商户......
  • springboot 接收前端数组
    前端:(黄色内容为必选项!!!)axios({url:"/access/getArr",method:"post",data:JSON.stringify([1,2,3,4]),headers:{"Content-Type":"application/json",},});后端:@RequestMapping(value=......
  • BootstrapBlazor组件库,NET8.0使用教程
    BootstrapBlazor组件库,NET8.0使用教程BootstrapBlazor组件库官网https://www.blazor.zone/componentsBootstrapBlazor组件库github仓库地址https://github.com/dotnetcore/BootstrapBlazorBootstrapBlazor组件库gitee仓库地址https://gitee.com/LongbowEnterprise/Bootstrap......
  • 01-React-组件-setState
    setState是如何给state赋值的通过Object.assign()importReactfrom'react';classHomeextendsReact.Component{constructor(props){super(props);this.state={name:'BNTang',age:18......
  • 01-React-组件-Ref
    React中获取元素的方式字符串对象回调函数官方文档:https://zh-hans.reactjs.org/docs/refs-and-the-dom.html#gatsby-focus-wrapper第一种传统方式(在React中及其不推荐)importReactfrom"react";classAppextendsReact.PureComponent{constructor(prop......
  • 01-React-组件-CSS模块化
    CssModule(推荐)React的脚手架已经内置了cssmodules的配置:.css/.less/.scss等样式文件都修改成.module.css/.module.less/.module.scss等;在以前我们的文件是这样的index.css如果使用了CSS的模块化之后,在之前的文件的基础上在加上.module即可,如,index.module.cs......
  • 01-React-父子组件通讯-函数式组件
    在了解父子组件通讯这个知识点的时候,首先要说明清楚一点内容就是什么是父组件什么是子组件,在上一篇React-组件开篇当中我们在App.js类组件当中使用到了其它的一些组件,那么App就是父组件,被App所使用的就是子组件,了解了什么是父子组件之后,介绍要来介绍一下它们之间该如何进......