Vue学习——ref属性

最新推荐文章于 2025-11-19 15:56:37 发布

原创最新推荐文章于 2025-11-19 15:56:37 发布 · 751 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #学习 #VSCode #Element-ui

Vue学习专栏收录该内容

45 篇文章

订阅专栏

本文介绍了Vue中$refs特性的使用方法，包括为元素或组件注册引用信息、获取真实DOM元素或组件实例对象的方式，并通过示例展示了如何在实际项目中应用这些技巧。

1.被用来给元素或子组件注册引用信息（id的代替者）
2.应用在html标签上获得的是真实DOM元素，应用在组件标签上是组件实例对象(vc)
3.使用方式：
打标识： <h1 ref="xxx">.....</h1> 或<Blogger ref="xxx"></Blogger>
获取：this.$refs.xxx

<template>
    <div class="blogger">
        <h2 ref="title">{{name}}</h2>
        <el-button type="primary" plain icon="el-icon-s-opportunity" @click="showDOM">点我输出上方的DOM元素</el-button>
        <el-button type="primary" icon="el-icon-s-promotion" @click="skip">点我跳转到博主博客</el-button>
    </div>
</template>

<script>
export default {
    name:'Blogger',
    data() {
        return {
            name: '才疏学浅的小缘同学',
        }
    },
    methods:{
        skip() {
            window.location.href="https://xiaoyuan.blog.youkuaiyun.com/"
        },
        showDOM() {
            console.log(this.$refs.title)
        }
    }
}
</script>

<style>
    .blogger{
        text-align: center;
    }
</style>