标签的ref属性和defineExpose
ref属性
用在普通标签上,拿到的是dom节点
<h1 ref='tit'>123456</h1>
let tit = ref()
用在组件标签上,获取的是组件实例
组件实例可以访问子组件通过defineExpose()暴露的变量和方法
父组件只能在挂载完成才能拿到子组件暴露的变量和方法
<Person ref='person'></Person >
let person = ref()
let aa = ref()
// 访问
onMounted(() => {
console.log(person .value.a)
person .value.say()
aa.value = ttt.value.a
})
defineExpose =>define开头的方法是vue3提供的全局可用,不需要手动导入
- 以下代码中通过ref可以访问到组件的变量a和方法say(),访问不到b
// Person组件
let a = ref('123')
let b = ref('456')
function say() {
let cc = 11111
alert(cc)
}
defineExpose({ a, say })