Vue学习计划-Vue3--核心语法（四）标签的ref属性、props父子通信

1. 标签的ref属性

1. 作用：用于注册模板引用

• 用在普通DOM标签上，获取的使DOM节点
• 用在组件标签上，获取的是组件实例对象

用在子组件上，父组件想要访问子组件内的数据，需要使用defineExpose暴露

2. 用在普通DOM标签上：

3. 用在组件标签上：

// 子组件内 Person.vue



// 父组件内 App.vue

2. props

• 结合ts来写props案例

1. ts文件内：（App.vue同级新建文件types\index.ts）

export interface PersonInter {
  id: string,
  name: string,
  age: number
}
// export type persons = Array
export type Persons = PersonInter[]

2. App.vue文件中

3. Person.vue文件中：