Vue3项目中父子组件之间互相传值、传递方法详细介绍

<template>
<div>
{{ message }}
</div>
</template>
<script setup>
const props = defineProps({
message: String
})
</script>

<template>
<div>
<ChildComponent :message="parentMessage" />
</div>
</template>
<script setup>
import ChildComponent from './ChildComponent.vue'
const parentMessage = 'Hello from parent'
</script>

<template>
<div>
<ChildComponent :user="userInfo" />
</div>
</template>
<script setup>
import ChildComponent from './ChildComponent.vue'
const userInfo = { name: 'John', age: 30 }
</script>

<template>
<div>
<p>Name: {{ user.name }}</p>
<p>Age: {{ user.age }}</p>
</div>
</template>
<script setup>
const props = defineProps({
user: Object
})
</script>

<template>
<div>
<ChildComponent :handleClick="handleParentClick" />
</div>
</template>
<script setup>
import ChildComponent from './ChildComponent.vue'
const handleParentClick = () => {
console.log('Parent method called from child')
}
</script>

<template>
<button @click="props.handleClick">Click me</button>
</template>
<script setup>
const props = defineProps({
handleClick: Function
})
</script>

<template>
<button @click="sendDataToParent">Send data</button>
</template>
<script setup>
const emit = defineEmits(['send-data'])
const sendDataToParent = () => {
const data = 'Hello from child'
emit('send-data', data)
}
</script>

<template>
<div>
<ChildComponent @send-data="handleChildData" />
</div>
</template>
<script setup>
import ChildComponent from './ChildComponent.vue'
const handleChildData = (data) => {
console.log('Received data from child:', data)
}
</script>

<template>
<button @click="sendMethodData">Send method data</button>
</template>
<script setup>
const emit = defineEmits(['send-method-data'])
const sendMethodData = () => {
const methodData = { param: 'example' }
emit('send-method-data', methodData)
}
</script>

<template>
<div>
<ChildComponent @send-method-data="handleMethodData" />
</div>
</template>
<script setup>
import ChildComponent from './ChildComponent.vue'
const handleMethodData = (data) => {
// 根据data执行相应的方法逻辑
console.log('Received method data:', data)
}
</script>