《vue3学习手记3》

标签的ref属性

vue3和vue2中的ref属性：

用在普通DOM标签上，获取的是DOM节点

ref用在组件标签上，获取的是组件实例对象
区别在于：

1.vue3中person子组件中的数据父组件App不能直接使用，需要引入并使用defineExpose才可以；

vue2中person子组件中的数据父组件App可直接使用。

2.vue2中获取节点：
<h2 ref="title">重庆</h2>
this.$refs.title

vue2中获取组件实例对象：
<Person ref="per"/>
this.$refs.per

3.vue3中的获取语法见以下代码：

clike 复制代码

<template>
  <div class="app">
    <h2>大理</h2>
    <h2 ref="title">重庆</h2>
    <h2>大西北</h2>
    <button @click="getDOM">点我获取节点</button>
  </div>
</template>

<script lang="ts" setup name="Person">
  //知识点：标签的ref属性    用于获取DOM元素或者组件实例对象时使用
  
  // 要求一：获取重庆这条信息的DOM节点
  import { ref,defineExpose } from "vue"
      let title=ref()
      function getDOM(){
        console.log(title.value)
      }
  // 要求二：获取组件实例对象（代码见App组件）
  // 要求三：在person组件里添加一些数据
        // 解析：在vue3中，person组件中的数据App组件如果想要使用需要引入并使用defineExpose才可以。(defineExpose也可以不引用，直接使用)
      let a= ref(0)
      let b= ref(1)
      let c= ref(2)
      defineExpose({a,b,c})   //这样父组件就获取到了person里的数据
</script>

App.vue组件

clike 复制代码

<template>
  <Person ref="per"/>
  <button @click="getPerson">点我获取person组件实例</button>
</template>

<script lang="ts" setup name="App">
  import Person from "./components/Person.vue"  
  // 只需引入，不用注册组件，vue3引入之后会自动注册
  import {ref} from "vue"
  // 要求二：获取组件实例对象
    let per=ref()
    function getPerson(){
      console.log(per.value)
    } 
</script>

TS接口、泛型、自定义类型

**作用：**提升代码的可靠性、可维护性和开发效率

clike 复制代码

<template>
  <div class="app">
    <h2>{{ person.name }}</h2>
    <h2>{{ personlist[1].name }}</h2>
  </div>
</template>

<script lang="ts" setup name="Person">
import {type personInter,type persons} from "../types"
// TS的接口、泛型、自定义类型    // 作用：给代码设置一定的约束，防止出错
      // 知识点一：TS的接口   
// ====================================================================
        //要求一：给person对象设置一定的约束
            //首先创建types文件夹，定义接口 
  let person:personInter={id:"asycs01",name:"李华",age:18}
  // 这样使用接口之后，如果打错单词或者属性类型会给提示

// ====================================================================
      // 知识点二：TS的泛型  <>
        //要求二：给personlist数组设置一定的约束
    let personlist:Array<personInter>=[
    {id:"asycs01",name:"李华",age:18},
    {id:"asycs02",name:"小明",age:20},
    {id:"asycs03",name:"小红",age:21}
    ]

// ====================================================================
      // 知识点三：TS的自定义类型  <>
        //要求三：基于要求二的高级写法（见index.ts）
    let personlist1:persons=[
    {id:"asycs01",name:"李华",age:18},
    {id:"asycs02",name:"小明",age:20},
    {id:"asycs03",name:"小红",age:21}
    ]
// ====================================================================
      // 知识点四：需要使用reactive时的写法：
        //要求四：要将数组中的数据变为响应式的数据
    let personlist2=reactive<persons>([
      {id:"asycs01",name:"李华",age:18},
      {id:"asycs02",name:"小明",age:20},
      {id:"asycs03",name:"小红",age:21}
      ])
</script>

types/index.ts:

clike 复制代码

// 定义接口
export interface personInter{
    id:string,
    name:string,
    age:number,
     gender?:string   
    //当想要给某一个对象添加性别时这样写，但如果写成gender:string就要给每一个属性都添加gender
}
// export type persons=Array<personInter>
export type persons=personInter[]

父亲给儿子传递参数

App.vue

clike 复制代码

<template>
  <Person :personList="personList"/>
</template>

<script lang="ts" setup name="App">
  import Person from "./components/Person.vue"
  // 只需引入，不用注册组件，vue3引入之后会自动注册

    import {type persons} from "./types"
    import {reactive} from "vue"
    let personList=reactive<persons>([
      {id:"asycs01",name:"李华",age:18},
      {id:"asycs02",name:"小明",age:20},
      {id:"asycs03",name:"小红",age:21}
      ])
 
     
</script>

Person.vue

clike 复制代码

<template>
  <div class="app">
    <ul>
      <li v-for="item in personList" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script lang="ts" setup name="Person">
import {type persons} from "../types"
import { withDefaults } from "vue";
// ===========================================================
//知识点一：defineProps 接收数据
    // 要求一：将App中的数据传递给Person
    // defineProps(["personList"])

// ===========================================================
 //知识点二：defineProps 接收数据并限制接收数据的类型
    // defineProps<{personList:persons}>()  
    // {}中第一个参数是接收的对象，第二个参数是接口规范

// ===========================================================
 //知识点三：defineProps 接收数据并限制接收数据的类型并限制必要性
    // defineProps<{personList?:persons}>() 
    
// ===========================================================
 //知识点三：defineProps 接收数据并限制接收数据的类型并限制必要性
    withDefaults(defineProps<{personList?:persons}>(),{
      personList:()=>[
      {id:"asycs01",name:"李华",age:18},
      {id:"asycs02",name:"小明",age:20}
      ]
    })
</script>