vue3中标签的ref属性和props

ref

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

 <h2 ref="html">你好</h2>

      let aa=ref();

      console.log(aa.value)

ref标签隐藏，也可以通过一个点击事件来代替生命周期onMounted

<template>
    <div ref="title">
        你好
    </div>
    <input type="text" ref="inp">
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
let inp = ref();
const show = () => {
    inp.value.style.display = 'none'
}
onMounted(() => {
    show()
})
</script>

    用在组件标签上，获取的是组件实例对象

        在子组件中，定义多组数据

 import { ref, defineExpose } from 'vue'
         let a1 = ref(0);
         let a2 = ref(1);
         let a3 = ref(2);
      defineExpose({a1,a2,a3})      //a1.value  a2.value  a3.value  这里用到了对象解构

    在父组件中使用

  <son ref="son"></son>
        import { ref } from 'vue'
         let son = ref()
        console.log(son.value)  //组件实例

       props组件通信 (父组件传递属性名子组件接受属性名)

         在父组件使用子组件，通过子组件的属性传值

        <parent  a="哈哈"  b="哎呦" :list="list"></parent>  

           在组件中接受传递的数据

          import { defineProps,withDefaults } from 'vue'

        defineProps(['a'])  //也可以直接接受，

         let x = defineProps(['a', 'b'])  

     console.log(x.a)    //可以获取数据在脚本语言中中做判断

  在组件中接受传递的数据 + 并且限制类型

       definePorops<{list:person}>      person 是ts定义的类型

    接收数据+限制数据类型+限制必要性+ 指定默认值

     withDefaults(definePorps < { list?: person } > (), {

         list: () => [

             {

                //随便写数据，随便写的数据就是默认值

            }

         ]

     })

案例

当用在echarts图表组件封装的的时候props组件通信 (父组件传递属性名 子组件接受属性名)

也就是说多组件可以写成一个组件（多个数据，一个组件，图的大小在于父组件的父元素的大小决定的）。

emit 子传父

子组件

//父组件