子传父vue/react

vue子传父:很多都是结合defineEmit来实现的,这里通过给子组件传递函数,子组件调用传递下来的函数实现传值。

父亲:

复制代码
<template>
  <div>
    father
    <Demo :clickChild="clickFather" msg="32434">Welcome to Your Vue.js App</Demo>
  </div>
</template>
<script setup>
import Demo from './Demo.vue'
  const clickFather = (e) => {
    console.log(e)
  }
</script>

儿子:

复制代码
<template>
  <div @click="clickToFather">childStart {{ msg }} childEnd</div>
</template>
<script setup>
import { ref, defineProps } from "vue";
const count = ref(0);
const props = defineProps({
  msg: String,
  clickChild: Function,
});

const clickToFather = () => {
  console.log("props", props);
  console.log("clickToFather", props.msg);
  props.clickChild && props.clickChild("22222");
};
</script>

react;同样的react也可以通过调用传递下来的函数的方式实现子传父

父:

复制代码
import React, { useState } from 'react';
import ChildComponent from './Bpp';
 
const ParentComponent = () => {
  const handleDataFromChild = (data) => {
    console.log(data);
  }
 
  return (
    <div>
      <button onClick={handleDataFromChild}>66666666</button>
      <ChildComponent data={"123"} onDataFromChild={handleDataFromChild} />
    </div>
  );
}
 
export default ParentComponent;

子:

复制代码
import React from "react";

const ChildComponent = (props) => {
  console.log(props);
  const sendDataToParent = () => {
    props.onDataFromChild('000');
  };

  return (
    <div>
      <button onClick={sendDataToParent}>Send Data to Parent</button>
    </div>
  );
};

export default ChildComponent;
相关推荐
不讲道理的柯里昂2 分钟前
Vue MathJax Beautiful,基于Mathjax的数学公式编辑插件
vue.js·开源
啷咯哩咯啷2 分钟前
Vue3构建低代码表单设计器
前端·javascript·vue.js
用户26124583401613 分钟前
vue学习路线(10.监视属性-watch)
前端·vue.js
Spider_Man4 分钟前
React-Router 全面解析与实战指南
前端·react.js
凌览5 分钟前
斩获 27k Star,一款开源的网站统计工具
前端·javascript·后端
丘耳6 分钟前
前端渲染方式
前端
The_cute_cat6 分钟前
Ajax和Axios的初步学习
前端·学习·ajax
Zz_waiting.7 分钟前
Javaweb - 10.4 ServletConfig 和 ServletContext
java·开发语言·前端·servlet·servletconfig·servletcontext·域对象
爱学习的小学渣8 分钟前
JS用法:Map,Set和异步函数
前端·javascript
Mike_jia15 分钟前
Icinga 2:开源监控领域的全能选手——从零构建企业级智能运维体系
前端