提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
文章目录
前言
vue3和react是前端进阶必不可少的工具,其中组件之间的传值更是核心内容。这一篇,我将介绍下vue3和react中父子组件是如何传值的
提示:以下是本篇文章正文内容,下面案例可供参考
一、vue3父子组件间传值
父组件向子组件传值
父组件向子组件传值,首先,引入子组件。然后和vue2传值相似直接将需要传递的参数直接写入子组件即可
1、父组件传值
<template>
<div class="box">
<h1>props:我是父组件曹操</h1>
<hr />
<Child info="我是曹操" :money="money"></Child>
</div>
</template>
<script setup lang="ts">
//props:可以实现父子组件通信,props数据还是只读的!!!
import Child from "./Child.vue";
import { ref } from "vue";
let money = ref(10000);
</script>
<style scoped>
.box {
width: 100vw;
height: 400px;
background: yellowgreen;
}
</style>
2、子组件接收数据
与vue2不同,这里需要引入方法defineProps()方法
<template>
<div class="son">
<h1>我是子组件:曹植</h1>
<p>{{props.info}}</p>
<p>{{props.money}}</p>
<!--props可以省略前面的名字--->
<p>{{info}}</p>
<p>{{money}}</p>
<button @click="updateProps">修改props数据</button>
</div>
</template>
<script setup lang="ts">
//需要使用到defineProps方法去接受父组件传递过来的数据
//defineProps是Vue3提供方法,不需要引入直接使用
let props = defineProps(['info','money']); //数组|对象写法都可以
//按钮点击的回调
const updateProps = ()=>{
// props.money+=10; props:只读的
console.log(props.info)
}
</script>
<style scoped>
.son{
width: 400px;
height: 200px;
background: hotpink;
}
</style>
子组件向父组件传值
子组件向父组件传值,与vue2相似
1、子组件传值
此时子组件需要用到defineEmits()方法
<template>
<div class="child">
<p>我是子组件2</p>
<button @click="handler">点击我触发自定义事件xxx</button>
<button @click="$emit('click','AK47','J20')">点击我触发自定义事件click</button>
</div>
</template>
<script setup lang="ts">
//利用defineEmits方法返回函数触发自定义事件
//defineEmits方法不需要引入直接使用
let $emit = defineEmits(['xxx','click']);
//按钮点击回调
const handler = () => {
//第一个参数:事件类型 第二个|三个|N参数即为注入数据
$emit('xxx','东风导弹','航母');
};
</script>
<style scoped>
.child {
width: 400px;
height: 200px;
background: pink;
}
</style>
2、父组件接收数据
<template>
<div>
<h1>事件</h1>
<!-- 原生DOM事件 -->
<pre @click="handler">
大江东去浪淘尽,千古分流人物
</pre>
<button @click="handler1(1,2,3,$event)">点击我传递多个参数</button>
<hr>
<!--
vue2框架当中:这种写法自定义事件,可以通过.native修饰符变为原生DOM事件
vue3框架下面写法其实即为原生DOM事件
vue3:原生的DOM事件不管是放在标签身上、组件标签身上都是原生DOM事件
-->
<hr>
<!-- 绑定自定义事件xxx:实现子组件给父组件传递数据 -->
<Event2 @xxx="handler3" @click="handler4"></Event2>
</div>
</template>
<script setup lang="ts">
//引入子组件
import Event2 from './Event2.vue';
//事件回调---4
const handler3 = (param1,param2)=>{
console.log(param1,param2);
}
//事件回调--5
const handler4 = (param1,param2)=>{
console.log(param1,param2);
}
</script>
<style scoped>
</style>
二、React父子组件间传值
父组件向子组件传值
1、父组件传值,子组件接收数据
父组件向子组件传值,子组件使用props接收参数
// 父传子
// 1. 父组件传递数据 子组件标签身上绑定属性
// 2. 子组件接收数据 props的参数
function Son (props) {
// props:对象里面包含了父组件传递过来的所有的数据
// { name:'父组件中的数据'}
console.log(props)
return <div>this is son, {props.name}, jsx: {props.child}</div>
}
function App () {
const name = 'this is app name'
return (
<div>
<Son
name={name}
age={18}
isTrue={false}
list={['vue', 'react']}
obj={{ name: 'jack' }}
cb={() => console.log(123)}
child={<span>this is span</span>}
/>
</div>
)
}
export default App
2、子组件传值,父组件接收数据
// 核心:在子组件中调用父组件中的函数并传递实参
import { useState } from "react"
function Son ({ onGetSonMsg }) {
// Son组件中的数据
const sonMsg = 'this is son msg'
return (
<div>
this is Son
<button onClick={() => onGetSonMsg(sonMsg)}>sendMsg</button>
</div>
)
}
function App () {
const [msg, setMsg] = useState('')
const getMsg = (msg) => {
console.log(msg)
setMsg(msg)
}
return (
<div>
this is App, {msg}
<Son onGetSonMsg={getMsg} />
</div>
)
}
export default App
总结
vue3和react的父子组件传值:
Vue3中:
父传子,与vue2类似。子组件接收参数时,需要用到defineProps()方法接收父组件传递过来的参数。
子传父,与vue2类似。用到事件传参,需要用到defineEmits()方法传递参数给父组件。
React中:
父传子,子组件用props接收即可。
子传父,需要申明触发父组件的哪个事件。