vue3獲取組件的使用
##?引用元素和組件
###?通過(guò)ref屬性拿到元素或組件內(nèi)容
? <!-- 綁定到一個(gè)元素上 -->
? ?<h2 ref="title">哈哈哈</h2>
? ?<!-- 綁定到一個(gè)組件實(shí)例上 -->
? ?<nav-bar ref="navBar"></nav-bar>
? ?<button @click="btnClick">獲取元素</button>
? ?btnClick() {
? ? ? ?console.log(this.$refs.title);
? ? ? ?console.log(this.$refs.navBar.message);
? ? ? ?this.$refs.navBar.sayHello();
? ? ? ?// $el
? ? ? ?console.log(this.$refs.navBar.$el);
}
###?通過(guò)$parent和$root獲取父組件和根組件
<template>
?<div>
? ?<h2>NavBar</h2>
? ?<button @click="getParentAndRoot">獲取父組件和根組件</button>
?</div>
</template>
methods: {
? ? ?getParentAndRoot() {
? ? ? ?console.log(this.$parent);
? ? ? ?console.log(this.$root);
? ? ?}
}
標(biāo)簽：
