标签的ref属性和defineExpose

标签的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 })