vue3使用

<template>
   <div>
     <h1> 当前数据{{ count }}</h1>
    <span>对象数据 {{ objDatas.name }}</span>
    <p ></p>

      <el-input v-model="fromDatas.name" placeholder="Please input"  @change="fromChange"/>
      <el-button type="primary" @click="changeAdd" >+</el-button>
      <Messages auType ='外层type' @getChild = 'handleGetChild' ref='chRef'></Messages>

   </div>
</template>

<script setup>
import Messages from '../messages/index.vue'
import { ref ,reactive ,watchEffect,provide ,onMounted,getCurrentInstance} from  'vue'

        let emit = defineEmits()


        let  count  = ref(1)
        let  objDatas  = reactive({
            name:'王'
        });
         let  fromDatas  = reactive({
            name:'这是名称'
        });
       let chRef = ''
        onMounted(()=>{
            // emit.on('getChild')
           chRef =  getCurrentInstance();
        })
        
        let handleGetChild = val=>{
            console.log("获取子组件的数据",val)
        }
        let changeAdd = ()=>{
            count.value = count.value+1;
            objDatas.name = '修改后的姓名';
           console.log("chRef", chRef.ctx.$refs.chRef)
        // chRef.ctx.$refs.chRef
        }
    
        /**
         * 立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行。
         */
       watchEffect(() => {
        // 用来做响应性追踪
        console.log("组件更新",count.value);
 
        })

        let fromChange = (value)=>{
            console.log("djkkdj",value);
            console.log("数据更新",fromDatas)
        }

        /**
         * 用于提供可以被后代组件注入的值。
         */
        provide('homeDatas',{
            homeDatas:{
                name:"外层组件数据"
            }
        })
     

</script>

<style>

</style>

<template>
  <div>子组件</div>
      <el-button type="primary" @click="changeAdd" >子组件触发函数</el-button>
</template>

<script setup>
import { inject,defineExpose } from 'vue';

    let emit = defineEmits()
    let props = defineProps({
        auType:String
    })


    let injects = inject('homeDatas')
    console.log("injects",injects);

    console.log("props,context",props,)

    const changeAdd = ()=>{
    emit('getChild',{
        a:1,age:12
    })
    }

    //  return {
    //     changeAdd
    //  }

    /**
     * 使用 <script setup> 的组件是默认关闭的——即通过模板引用或者 $parent 链获取到的组件的公开实例，不会暴露任何在 <script setup> 中声明的绑定。

可以通过 defineExpose 编译器宏来显式指定在 <script setup> 组件中要暴露出去的属性：
     */
    defineExpose({
        getChildDatas(){
            return 22
        }
    })

</script>

<style>

</style>