<template>
  <div style="background-color: lightcoral;">
    我是父组件
    <!-- 将要传给子组件的值重新命个名加上：即可 -->
    <Children :name = "fatherName"></Children>
  </div>

</template>

<script setup>
import Children from './components/children.vue'
const fatherName = 'Cain'
</script>

<template>
  我是子组件
  父亲的名字是：{{ props.name }}
</template>

<script setup>
// 接收父组件传过来的值
const props = defineProps({
  name: {
    type: String,
    default: '默认值'
  }
})
</script>

<template>
  我是子组件
  <button @click="send">发送</button>
</template>

<script setup>
// 定义子组件传值
const emit = defineEmits(['update:childrenName'])
const send = () => {
    // 传值给父组件
  emit('update:childrenName', '这里是子组件传过来的值1', '这里是子组件传过来的值2')
}
</script>

<template>
  <div >
    我是父组件
    <!-- 通过事件的方式接收子组件传过来的值 事件名要与子组件中定义的相同-->
     <!-- 需要使用一个函数来接收，因为子组件的值是放到参数中的-->
    <Children @update:children-name="getChildrenName"></Children>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import Children from './components/children.vue'
const childrenName = ref('')
// 定义接收子组件传值的方法
const getChildrenName = (name1, name2) => {
  console.log(name1, name2)
}
</script>

<template>
  我是子组件
</template>

<script setup>
// 使用 defineExpose 向父组件暴露方法或属性
defineExpose({
  send() {
    console.log('子组件发送消息')
  },
  name: '子组件名称'
})
</script>

<template>
  <div >
    我是父组件
    <!-- 使用ref绑定一下子组件的实例 -->
    <Children ref="children"></Children>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import Children from './components/children.vue'
const children = ref('')
import { onMounted } from 'vue'
onMounted(() => {
  // 通过ref访问子组件暴露的方法
  children.value?.send()
  console.log(children.value?.name) // 访问子组件暴露的属性
})
</script>