VUE3之Component(三)

$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);
            }

发表评论