vue3+ts stup中defineProps、defineEmits、defineExpose父子组件传参和函数调用

子组件

<template>
  <p>{{ props.msg }}</p>
  <button @click="handleClick">点击我调用父组件</button>
</template>
<script setup lang="ts">
  const props = defineProps({
    msg: {type: String, dafult:()=>"默认值"} // 定义的父组件传过来的的参数并添加默认值 msg与父组件的:msg相同
  })

  const emit = defineEmits(['on-change']); // 父组件的触发事件

  // 定义函数 方法一
  const handleClick=()=>{
    emit('on-change', {type:'1',Number: 1}); // 调用父组件函数和传参
  }

  // 定义函数 方法二
  function childFun(params:string){
    console.log(params, '子组件函数被调用');
  }

  defineExpose({ // 暴露子组件参数
    child: '我是暴露子组件参数',
    childFun
  })
</script>

父组件

<script setup lang="ts">
import TheWelcome from '../components/child.vue' // 应用子组件文件
// ref 接受一个内部值，返回一个响应式的、可更改的 ref 对象，此对象只有一个指向其内部值的属性 .value
// onMounted  注册一个回调函数，在组件挂载完成后执行。
import { ref, onMounted } from 'vue'

// 定义变量 方法一
const msg = ref('欢迎！')
// 定义变量 方法二
// var msg:string = "Runoob";

// 定义函数方法一
const handleClick=(params:string)=>{
  console.log(params)
}

// 定义函数方法二
// function handleClick(params:string){
//   console.log(params)
// }

const prosEmitRef = ref() // 获取子组件暴露的参数
onMounted(()=> {
  console.log(prosEmitRef.value.child) // 打印值
  prosEmitRef.value.childFun('父组件调用'); //调用子组件函数
})
</script>

<template>
  <main>
    <!-- 
      :msg="msg" 传给子组件的参数
      @on-change="handleClick"子组件调用用父组件的函数 handleClick
    -->
    <TheWelcome ref="prosEmitRef" :msg="msg" @on-change="handleClick" />
  </main>
</template>