Usage and demonstration of ref in Vue

ref definition: used to register reference information for an element or subcomponent. The reference information will be registered on the $refs object on the parent component.

• If used on a normal dom element, the reference points to dom element;
• If used on a child component, the reference points to the component instance.

Example:

Component 1:

<template>

  <div>

      I am{

{name}}

  </div>

</template>

<script>

export default {  

    name:'Cpn1',

    data() {

        return {

            name:'Component 1'

        }

    },

}

</script>

Component 2:

<template>

  <div>I am {

{name}}</div>

</template>

<script>

export default { 

    name:'Cpn2',

    data() {

        return { 

            name:'Component 2'

        }

    },

}

</script>

App.vue

<template>

  <div id="app">

    <cpn-1 ref="c1"></cpn-1>

    <cpn-2 ref="c2"></cpn-2>

    <button @click="showDom">Button</button>

    <h2 ref="title">I am the 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)

      // Get a real DOM object and modify the value var title = this.$refs.title;

      title.innerText="helloWord"

    },

  },

};

</script>

Execute the above program and click the "Button" on the page. The effect is as follows:

Also look at the console:

You can see that when the ref object is used on a normal element, a normal DOM element is obtained. When ref is used on a child component, the reference points to the component instance.

According to actual needs, we can register reference information for elements or subcomponents through ref. When needed, we can use $refs to obtain the real DOM element or component instance to perform the operations we want.

This is the end of this article about the usage and demonstration of ref in Vue. For more information about the usage of ref in Vue, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!