1.父组件访问子组件:vue3使用的是$refs,vue2中使用的是$children,但在vue3中给废弃掉了。
<template>
<div>
<div >
<!-- 在子组件上定义ref -->
<son :ac="name" :nn="456" ref="son"></son>
<!-- 在标签上定义ref -->
<p ref="p">p标签</p>
</div>
</div>
</template>
//在生命周期中打印一下访问的值
mounted(){
console.log(this.$refs.son.a,this.$refs.p);
}
2.子组件访问父组件:$parent在开发中尽量少用,因为组件复用性很高,耦合性较差。
mounted(){
console.log(this.$parent);
}
3.子组件访问根组件
mounted(){
console.log(this.$root);
}