vue3+ts实现父子组件传值

在Vue3中，可以使用`defineProps`和`defineExpose`来实现父子组件之间的传值。

在子组件中，可以使用`defineExpose`来暴露子组件的属性和方法。例如，在子组件的代码中，我们可以定义一个`inputVal`的`ref`属性，并使用`defineExpose`将其暴露出来：

<script setup lang="ts">
import { ref, defineExpose } from 'vue'

const inputVal = ref('')

// 子组件暴露的方法
const exposeFun = (name: string) => {
  console.log('子组件暴露自己的属性', name)
}

// 使用defineExpose暴露inputVal和exposeFun
defineExpose({ inputVal, exposeFun })
</script>

在父组件中，可以使用`defineProps`来接收子组件传递的属性。例如，在父组件的代码中，我们可以定义一个`msg`的`ref`属性，并将其传递给子组件：

<script setup lang="ts">
import SonVue from './Son.vue'
import { ref } from 'vue'

// 传给子组件的内容
const msg = ref('这是父组件传给子组件的内容')
</script>

然后，在父组件的模板中，可以使用子组件并将`msg`作为属性传递给子组件：

<template>
  <div>
    <h2>这是父组件</h2>
    <h4>下方是子组件的内容</h4>
    <SonVue :msg="msg" />
  </div>
</template>

这样，父组件就可以将`msg`传递给子组件，并在子组件中使用`inputVal`和`exposeFun`来获取和操作传递的值了。