Vue获取子组件实例对象ref属性的方法推荐

<template>
    <div>
        <h2>主页</h2>
        <p id="title">{{ msg }}</p>
        <button @click="getDOM">点击获取DOM元素</button>
    </div>
</template>
 
<script>
export default {
    name: 'Home',
    data() {
        return {
            msg: "哇哈哈哈！"
        }
    },
    methods: {
        getDOM() {
            // 通过原生 JS 获取 DOM 元素
            console.log(document.getElementById("title"));
        }
    }
}
</script>

<template>
    <div>
        <h2>主页</h2>
        <p ref="title">{{ msg }}</p>
        <button @click="getDOM">点击获取DOM元素</button>
    </div>
</template>
<script>
export default {
    name: 'Home',
    data() {
        return {
            msg: "哇哈哈哈！"
        }
    },
    methods: {
        getDOM() {
            // 通过 ref 属性获取 DOM 元素
            console.log(this.$refs.title);
            console.log(this);
        }
    }
}
</script>

<template>
    <div>
        <h2>轮播图</h2>
        <p>图片数量：{{ num }}</p>
    </div>
</template>
<script>
export default {
    name: "Banner",
    data() {
        return {
            num: 5
        }
    }
}
</script>

<template>
    <div>
        <h2>主页</h2>
        <p ref="title">{{ msg }}</p>
        <button @click="getDOM">点击获取DOM元素</button>
        <Banner ref="ban"></Banner>
    </div>
</template>
<script>
import Banner from "../components/Banner";
export default {
    name: 'Home',
    components: { Banner },
    data() {
        return {
            msg: "哇哈哈哈！"
        }
    },
    methods: {
        getDOM() {
            // 通过 ref 属性获取子组件实例对象
            console.log(this.$refs.ban);
            console.log(this.$refs.ban.num);
        }
    }
}
</script>