Vue2基础篇-22-ref属性

最新推荐文章于 2023-12-11 21:06:37 发布

Alan0517

最新推荐文章于 2023-12-11 21:06:37 发布

阅读量275

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Hmj050117/article/details/128239988

版权

Vue2+Ts-基础篇专栏收录该内容

40 篇文章 3 订阅

订阅专栏

1. 简介

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

2. demo

<template>
  <div>
    <School></School>
    <h1 v-text="msg" ref="title"></h1>
    <button @click="ShowDom">点我</button>
    <School ref="sch" />
  </div>
</template>

<script>
import School from "./components/School.vue";

export default {
  name: "App",
  data() {
    return {
      name: "Hello",
      msg: "sakshaslashakl",
    };
  },
  methods: {
    ShowDom() {
      console.log(this.$refs);
    },
  },
  components: {
    School,
  },
};
</script>