<template>
  <div class="hello">
  我是父組件
  <!-- 父組件通過:變量(這里是info)綁定值 -->
   <Child :info="parentMsg"></Child>
  </div>
</template>
<script setup>
import Child from './Child'
import {ref} from 'vue'
const parentMsg=ref('父組件傳遞值是a')
</script>
<style scoped>
</style>

<template>
<!-- info是父組件傳遞過了的值 -->
  <div>我是子組件拿到了父組件的值是{{info}}</div>
</template>
<script setup>
import { toRefs, defineProps } from 'vue'
const props = defineProps({
  //子組件接收父組件傳遞過來的值
  info: String,
})
//使用父組件傳遞過來的值
const {info} =toRefs(props)
</script>
<style>
</style>

<template>
  <button @click="clickChild">點擊子組件</button>
</template>
<script setup>
import { defineEmits } from 'vue'
// 使用defineEmits創(chuàng)建名稱，接受一個數(shù)組
const emit = defineEmits(['clickChild'])
const clickChild=()=>{
  let param={
    content:'b'
  }
  //傳遞給父組件
  emit('clickChild',param)
}
</script>
<style>
</style>

<template>
  <div class="hello">
  我是父組件
  <!-- clickChild是子組件綁定的事件，click是父組件接受方式 -->
   <Child  @clickChild="clickEven"></Child>
 <p>子組件傳遞的值是 {{result}}</p>
 </div>
</template>
<script setup>
import Child from './Child'
import {ref} from 'vue'
const result=ref('')
const clickEven=(val)=>{
  console.log(val);
  result.value=val.content
}
</script>
<style scoped>
</style>

<template>
  <div>
        <h2> 我是子組件</h2>
        <p>性別:{{ sex}}</p>
    </div>
</template>
<script setup>
import { reactive, ref,defineExpose } from "vue";
let sex=ref('男')
let info=reactive({
    like:'王者榮耀',
    age:18
})
defineExpose({sex, info})
</script>
<style>
</style>

<template>
  <div class="hello">
  我是父組件
   <Child ref="testcomRef"></Child>
<button @click="getSonHander">獲取子組件中的數(shù)據(jù)</button>
 </div>
</template>
<script setup>
import Child from './Child'
import {ref} from 'vue'
const testcomRef = ref()
const getSonHander=()=>{
  console.log('獲取子組件中的性別', testcomRef.value.sex );
    console.log('獲取子組件中的其他信息', testcomRef.value.info )
}
</script>
<style scoped>
</style>