Vue中ref的简单用法是怎样，定义是什么-群英

上一篇：用vue实现手机验证码登录的代码是什么下一篇：Vue中的三种分别是什么插槽，怎么应用

在实际应用中，我们有时候会遇到“Vue中ref的简单用法是怎样，定义是什么”这样的问题，我们该怎样来处理呢？下文给大家介绍了解决方法，希望这篇“Vue中ref的简单用法是怎样，定义是什么”文章能帮助大家解决问题。

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>

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