前言

在V3中，我们引入的组件，不需要再注册，直接在通过标签使用

父组件给子组件传值

定义的值传入子组件，可以使用v-bing，通常习惯用简写的:去传值，名字自定义即可

<Water :title="title"></Water>

子组件可以通过 defineProps宏函数去接受，type定义传过来的属性，dedault定义默认的值

有两种写法，一种是js，另一种就是利用ts，方便一点

const props = defineProps({
  title: {
    type: String,
    default: ''
  }
})

这种就是ts语法，通过定义泛型的方式defineProps<>去定义

const props = defineProps<{
  title:string
}>()

当我们这样使用的时候，通过ts特有的定义默认自，只有ts中才可以定义withDefaults传两个参数，第一个就传defineProps宏函数，第二个就是自定义默认值

withDefaults(defineProps<{
  title:string,
  arr: string[]
}>(), {
  arr:() => ['A', 'B']
}) 

子组件给父组件传值

通过defineEmits宏函数给父组件传值，定义一个事件去触发这个宏函数，父组件@接受，也是js，ts方式

//子组件
const emit = defineEmits(['on-click'])
const change = () => {
  emit('on-click','小石')
}

<Water @on-click="getname" :title="title"></Water>

ts的方式定义 用defineEmits<>方法去使用

const emit = defineEmits<{
  (e: "on-click", name:string):void
}>()
const change = () => {
  emit('on-click','小石')
}

子组件给父组件暴露方法，属性

子组件定义defineExpose函数去自定义属性和方法

defineExpose({
  name: "春风吹又生",
  add: () => console.log('真热')
})

父组件使用ref属性，利用ts中的InstanceType属性去定义组件的属性,elementui中的表单预校验，就是通过定义的ref去调用子组件的方法

<Water ref="waterFall"></Water>

const waterFall = ref<InstanceType<typeof Water>>()
 waterFall.value?.add