Vue3学习--父传子&子传父

1.父传子

//父组件
//在父组件中引入子组件
<script>
import WelcomeItem from './components/WelcomeItem.vue' 

const count = ref(100)

</script>
<template>
<div class="father">
<h2>父组件</h2>
<!-- 1.绑定属性 -->
<WelcomeItem :count="count" message="father message"></WelcomeItem>
  </div>
</template>

//子组件
<script>
//2.defineProps接收数据
const props = defineProps({
message:'String'
count:Number
})
</script>
<template>
<div class="son">
<h3>子组件</h3>
<div>
  父组件传入数据--{{ message }}
</div>
</div>

</template>

2.子传父
父组件

<script setup>
import HelloWorldVue from './components/HelloWorld.vue'
const getMessage =(msg)=>{
  console.log(msg);
}
</script>
<template>
 <div class="father">
    <h2>父组件</h2>
    <HelloWorldVue :count="count" message="father message" @get-message="getMessage"></HelloWorldVue>
  </div>
</template>

子组件

<script setup>
const emit = defineEmits(['get-message'])
const sendMessage = () =>{
  emit('get-message','this is son message')
}
</script>
<template>
<div class="son">
  <h3>子组件</h3>
  <div>
    父组件传入的数据-{{ message }}-{{ count }}
    子传父
    <button @click="sendMessage">自定义</button>
  </div>
</div>
</template>