Vue | Vue中 ref 的用法及演示

最新推荐文章于 2025-10-13 13:25:57 发布

原创最新推荐文章于 2025-10-13 13:25:57 发布 · 1.3k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript #ref属性 #refs对象

JavaScript 同时被 2 个专栏收录

112 篇文章

订阅专栏

Vue.js

74 篇文章

订阅专栏

这篇文章主要介绍了Vue中ref的用法及演示，ref被用来给元素或子组件注册引用信息。引用信息会被注册在父组件上的$refs对象上，下面来看看文章的详细内容，需要的朋友可以参考一下。

ref 定义：被用来给元素或子组件注册引用信息。引用信息会被注册在父组件上的$refs对象上。

如果是在普通的dom元素上使用，引用指向的就是dom元素；
如果用在子组件上，引用指向的就是组件实例。

举例：

组件1：

<template>
  <div>我是{ {name}}</div>
</template>

<script>
  export default {
    name: "Cpn1",

    data() {
      return {
        name: "组件1",
      };
    },
  };
</script>

组件2：

<template>
  <div>我是{ {name}}</div>
</template>

<script>
  export default {
    name: "Cpn2",

    data() {
      return {
        name: "组件2",
      };
    },
  };
</script>

App.vue

<template>
  <div id="app">
    <cpn-1 ref="c1"></cpn-1>
    <cpn-2 ref="c2"></cpn-2>
    <button @click="showDom">按钮</button>
    <h2 ref="title">我是标题</h2>
    <input type="text" ref="input" value="123" />
  </div>
</template>

<script>
  import Cpn1 from "./components/Cpn1.vue";
  import Cpn2 from "./components/Cpn2.vue";

  export default {
    components: {
      Cpn1,
      Cpn2,
    },
    name: "App",
    methods: {
      showDom() {
        console.log(this.$refs.c1);
        console.log(this.$refs.c2.$data.name);
        console.log(this.$refs.title);
        console.log(this.$refs.input.value);

        // 获取一个真实的dom对象并修改值
        var title = this.$refs.title;
        title.innerText = "helloWord";
      },
    },
  };
</script>

执行上面的程序，点击页面上的《按钮》，效果如下：