父子传值

父传子

子组件

<script setup>
defineProps({
  msg:''
})
</script>

<template>
  <div>
    {{msg}}
  </div>
</template>

子组件使用defineProps声明

父组件

<HelloWorld :msg='123'/>

父组件通过v-bind给予值。

子传父

子组件

<script setup>
const emit = defineEmits(['helloClick'])
const clickTap = ()=>{
  emit('helloClick','子组件传给父组件')
}
</script>

<template>
  <div>
    <button @click="clickTap">派发给父组件</button>
  </div>
</template>

子组件使用defineEmits声明

父组件

<script setup>
import HelloWorld from './components/HelloWorld.vue'

const helloClick = (e)=>{
  console.log(e)
}
</script>

<template>
  <HelloWorld :msg='123' @helloClick="helloClick"/>
</template>

父组件接收

其他的像兄弟传参啊。可以利用同一个父组件，但是最推荐的还是Vuex。