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 子传父
子组件
//父组件