1. 简介
在初次接触组件传值时总是忘了其中的细节,我会在这个文章中简单的写一下在vue2,3中父子组件最常用的传值方式,便于我开发中查阅
2. Vue2中父子组件传值方法
2.1父组件向子组件传值
Father.vue
<template>
<div>
<child-component :parent-message="parentMessage"/>
</div>
</template>
<script>
import ChildComponent from './components/Son.vue';
export default {
components: {
ChildComponent
},
data() {
return {
parentMessage: '这是来自父组件的消息',
};
},
};
</script>Son.vue
<template>
<div>
<p>{{ parentMessage }}</p>
</div>
</template>
<script>
export default {
props: {
parentMessage: {
type: String,
required: true
},
},
mounted(){
console.log(this.parentMessage);
}
};
</script>2.2子组件像父组件传值
Father.vue
<template>
<div>
<h2>父组件</h2>
<p>从子组件接收到的数据: {{ messageFromChild }}</p>
<child-component @child-event="handleChildEvent"/>
</div>
</template>
<script>
import ChildComponent from './components/Son.vue';
export default {
components: {
ChildComponent
},
data() {
return {
parentMessage: '这是来自父组件的消息',
messageFromChild: ''
};
},
methods: {
handleChildEvent(message) {
this.messageFromChild = message;
}
}
};
</script><template>
<div>
<h3>子组件</h3>
<button @click="sendDataToParent">发送数据给父组件</button>
</div>
</template>
<script>
export default {
methods: {
sendDataToParent() {
//自定义事件
this.$emit('child-event', '这是来自子组件的消息');
}
},
};
</script>3.Vue3中父子组件传值方法
3.1 父组件向子组件传值
Father.vue
<template>
<Son :data="data"></Son>
<!-- :data可变 子组件也相应改变 -->
</template>
<script setup>
import Son from './components/Son.vue';
let data = '父=>子'
</script>Son.vue
<template>
<p :data="data">{{props.data}}</p>
<!-- 属性绑定的值需与父组件相同 -->
</template>
<script setup>
//使用defineProps方法接收父组件的值
const props = defineProps({
data: {
type: String,
required: true
}
})
</script>3.2 子组件向父组件传值
Father.vue
<template>
<Son @handleSizeChange="getSon"/>
<!-- 使用子组件的自定义事件 -->
</template>
<script setup>
import Son from './components/Son.vue';
const getSon = (data) => {
console.log('子=>父:', data);
};
</script>Son.vue
<template>
<button @click="handleSizeChange">子组件传值</button>
</template>
<script setup>
import { ref, defineEmits } from 'vue';
//创建自定义事件
const emit = defineEmits(['handleSizeChange']);
const handleSizeChange = () => {
emit('handleSizeChange', data);
// data为需要传的数据
};
</script> 4. React父子组件传值
4.1父组件向子组件传值
Father.jsx
import React from 'react';
import Son from './Son';
const ParentComponent = () => {
const messageFromParent ='这是来自父组件的消息'
return (
<div>
<ChildComponent fatherData={messageFromParent} />
</div>
);
};
export default ParentComponent;Son.jsx
import React from 'react';
const ChildComponent = (props) => {
console.log(props.fatherData)
return (
<div>
<h3>子组件</h3>
<p>{props.fatherData}</p>
</div>
);
};
export default ChildComponent;4.2子组件向父组件传值
Father.jsx
import React, { useState } from "react";
import ChildComponent from "./Son";
const ParentComponent = () => {
const [messageFromChild, setMessageFromChild] = useState('');
const getSon = (data) => {
console.log(data);
setMessageFromChild(data);
};
return (
<div>
<h2>父组件</h2>
<p>子组件发送过来的数据: {messageFromChild}</p>
<ChildComponent onGetSon={getSon} />
</div>
);
};
export default ParentComponent;Son.jsx
import React from 'react';
const ChildComponent = ({ onGetSon }) => {
const handleClick = () => {
onGetSon('子=>父');
};
return (
<div>
<button onClick={handleClick}>发送给父组件</button>
</div>
);
};
export default ChildComponent;