v3ref$parent

//父组件
<template>
  <input type="text" v-model="info">
  <div class="f">
        <!-- 通过updata:modevalue  -->
    <Child1 :monery="monery" @updata:modelValue="handrlog" />
    {{ page }}------{{ pagesize }}
    <Child2  v-model:page="page" v-model:pagesize="pagesize"/>
    <button @click="cli"></button>
    
  </div>
</template>
<script lang='ts' setup>
import { ref } from 'vue'
import Child1 from './Child1.vue'
import Child2 from './Child2.vue'
let info = ref('我是父组件的数据')
let monery = ref<number>(100)
//
let page=ref(1)
let pagesize=ref(12)

const handrlog = (num: number) => {
  monery.value = num
}

const cli=()=>{
    console.log('调用了父组件的方法');
}
defineExpose({
  cli ,
  info
})
</script>

<style  scoped>
.f {
  display: flex;
  justify-content: space-between;
  background-color: rgb(176, 106, 15);

}
</style>

//子组件
<template>
  <div class="aa">
    zuo
    <h1>{{ monery }}</h1>
    <button @click="click_data">点击</button>
    <!-- 获取父组件的实例方法 -->
    <button @click="haldre($parent)">000000000000000000</button>
  </div>
</template>
<script lang='ts' setup>
let props = defineProps(['monery'])
//自定义事件去触发 父组件的 updata:modelValu 修改父组件的值
let $emit = defineEmits(['updata:modelValue'])
const click_data = () => {
  // 触发updata:modelValu修改父组件传过来的值
  $emit('updata:modelValue', props.monery + 100)
}
//
const haldre=($parent:any)=>{
  $parent.monery+=10
  console.log($parent.info);
  $parent.cli()
  
  
}
</script>

<style  scoped>
.aa {

  width: 500px;
  height: 200px;
  background-color: aquamarine;
}
</style>