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;