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>