$refs
对元素或者组件添加refs属性,可以获取其实例
获取元素时直接获取到的是该元素的实例,并可以使用其Dom方法。
<template>
<div>
<!-- 绑定到一个元素上 -->
<h2 ref="title">哈哈哈</h2>
<button @click="btnClick">获取元素</button>
<!-- 绑定到一个组件实例上 -->
<nav-bar ref="navBar"></nav-bar>
</div>
</template>
<script>
import NavBar from "./Nav.vue";
export default {
components:{
NavBar
},
methods: {
btnClick(){
console.log(this.$refs.title);
console.log(this.$refs.navBar.message);
this.$refs.navBar.sayHello();
}
},
}
</script>
获取组件时,得到的是一个代理,通过代理可以获取其定义的data、methods等属性
<template>
<div>
<h2>NavBar</h2>
</div>
</template>
<script>
export default {
data() {
return {
message:"我是nav中的message"
}
},
methods: {
sayHello(){
console.log("hello navBar");
}
},
}
</script>
$parent和$root
在子组件中可以通过$parent和$root来获取父组件和根组件。
getParentAndRoot(){
console.log(this.$parent);
console.log(this.$root);
}