Rumah hujung hadapan web tutorial js 详细介绍Vue.js中ref ($refs)用法

详细介绍Vue.js中ref ($refs)用法

Jun 19, 2018 pm 05:51 PM
refs vue vue.js

本篇文章主要介绍了浅谈Vue.js中ref ($refs)用法举例总结,现在分享给大家,也给大家做个参考。

本文介绍了Vue.js中ref ($refs)用法举例总结,分享给大家,具体如下:

看Vue.js文档中的ref部分,自己总结了下ref的使用方法以便后面查阅。

一、ref使用在外面的组件上

HTML 部分

<p id="ref-outside-component" v-on:click="consoleRef">
  <component-father ref="outsideComponentRef">
  </component-father>
  <p>ref在外面的组件上</p>
</p>
Salin selepas log masuk

js部分

  var refoutsidecomponentTem={
    template:"<p class=&#39;childComp&#39;><h5>我是子组件</h5></p>"
  };
  var refoutsidecomponent=new Vue({
    el:"#ref-outside-component",
    components:{
      "component-father":refoutsidecomponentTem
    },
    methods:{
      consoleRef:function () {
        console.log(this); // #ref-outside-component   vue实例
        console.log(this.$refs.outsideComponentRef); // p.childComp vue实例
      }
    }
  });
Salin selepas log masuk

二、ref使用在外面的元素上

HTML部分

<!--ref在外面的元素上-->
<p id="ref-outside-dom" v-on:click="consoleRef" >
  <component-father>
  </component-father>
  <p ref="outsideDomRef">ref在外面的元素上</p>
</p>
Salin selepas log masuk

JS部分

  var refoutsidedomTem={
    template:"<p class=&#39;childComp&#39;><h5>我是子组件</h5></p>"
  };
  var refoutsidedom=new Vue({
    el:"#ref-outside-dom",
    components:{
      "component-father":refoutsidedomTem
    },
    methods:{
      consoleRef:function () {
        console.log(this); // #ref-outside-dom  vue实例
        console.log(this.$refs.outsideDomRef); //  <p> ref在外面的元素上</p>
      }
    }
  });
Salin selepas log masuk

三、ref使用在里面的元素上---局部注册组件

HTML部分

<!--ref在里面的元素上-->
<p id="ref-inside-dom">
  <component-father>
  </component-father>
  <p>ref在里面的元素上</p>
</p>
Salin selepas log masuk

JS部分

  var refinsidedomTem={
    template:"<p class=&#39;childComp&#39; v-on:click=&#39;consoleRef&#39;>" +
            "<h5 ref=&#39;insideDomRef&#39;>我是子组件</h5>" +
         "</p>",
    methods:{
      consoleRef:function () {
        console.log(this); // p.childComp  vue实例 
        console.log(this.$refs.insideDomRef); // <h5 >我是子组件</h5>
      }
    }
  };
  var refinsidedom=new Vue({
    el:"#ref-inside-dom",
    components:{
      "component-father":refinsidedomTem
    }
  });
Salin selepas log masuk

四、ref使用在里面的元素上---全局注册组件

HTML部分

<!--ref在里面的元素上--全局注册-->
<p id="ref-inside-dom-all">
  <ref-inside-dom-quanjv></ref-inside-dom-quanjv>
</p>
Salin selepas log masuk

JS部分

  Vue.component("ref-inside-dom-quanjv",{
    template:"<p class=&#39;insideFather&#39;> " +
          "<input type=&#39;text&#39; ref=&#39;insideDomRefAll&#39; v-on:input=&#39;showinsideDomRef&#39;>" +
          " <p>ref在里面的元素上--全局注册 </p> " +
         "</p>",
    methods:{
      showinsideDomRef:function () {
        console.log(this); //这里的this其实还是p.insideFather
        console.log(this.$refs.insideDomRefAll); // <input type="text">
      }
    }
  });

  var refinsidedomall=new Vue({
    el:"#ref-inside-dom-all"
  });
Salin selepas log masuk

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

使用Vue如何设置多个Class

用JQuery如何实现表单验证,具体应该怎么做?

使用Angular如何实现国际化(详细教程)

通过nodejs使用http模块发送请求(详细教程)

Atas ialah kandungan terperinci 详细介绍Vue.js中ref ($refs)用法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Cara Membuka Segala -galanya Di Myrise
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Vue.js vs React: Pertimbangan khusus projek Vue.js vs React: Pertimbangan khusus projek Apr 09, 2025 am 12:01 AM

Vue.js sesuai untuk projek kecil dan sederhana dan lelaran yang cepat, sementara React sesuai untuk aplikasi besar dan kompleks. 1) Vue.js mudah digunakan dan sesuai untuk situasi di mana pasukan tidak mencukupi atau skala projek kecil. 2) React mempunyai ekosistem yang lebih kaya dan sesuai untuk projek dengan prestasi tinggi dan keperluan fungsional yang kompleks.

Cara menambah fungsi ke butang untuk vue Cara menambah fungsi ke butang untuk vue Apr 08, 2025 am 08:51 AM

Anda boleh menambah fungsi ke butang VUE dengan mengikat butang dalam templat HTML ke kaedah. Tentukan kaedah dan tulis logik fungsi dalam contoh Vue.

Cara merujuk fail js dengan vue.js Cara merujuk fail js dengan vue.js Apr 07, 2025 pm 11:27 PM

Terdapat tiga cara untuk merujuk kepada fail JS dalam vue.js: Secara langsung tentukan jalan menggunakan & lt; skrip & gt; tag ;; import dinamik menggunakan cangkuk kitaran hayat yang dipasang (); dan mengimport melalui Perpustakaan Pengurusan Negeri VUEX.

Cara Menggunakan Watch di Vue Cara Menggunakan Watch di Vue Apr 07, 2025 pm 11:36 PM

Pilihan Watch di Vue.js membolehkan pemaju mendengar perubahan dalam data tertentu. Apabila data berubah, tontonkan mencetuskan fungsi panggil balik untuk melakukan paparan kemas kini atau tugas lain. Pilihan konfigurasinya termasuk segera, yang menentukan sama ada untuk melaksanakan panggilan balik dengan serta -merta, dan mendalam, yang menentukan sama ada untuk mendengarkan secara rekursif terhadap objek atau tatasusunan.

Cara menggunakan bootstrap di vue Cara menggunakan bootstrap di vue Apr 07, 2025 pm 11:33 PM

Menggunakan bootstrap dalam vue.js dibahagikan kepada lima langkah: Pasang bootstrap. Import bootstrap di main.js. Gunakan komponen bootstrap secara langsung dalam templat. Pilihan: Gaya tersuai. Pilihan: Gunakan pemalam.

Cara kembali ke halaman sebelumnya oleh Vue Cara kembali ke halaman sebelumnya oleh Vue Apr 07, 2025 pm 11:30 PM

Vue.js mempunyai empat kaedah untuk kembali ke halaman sebelumnya: $ router.go (-1) $ router.back () menggunakan & lt; router-link to = & quot;/& quot; Komponen Window.History.Back (), dan pemilihan kaedah bergantung pada tempat kejadian.

Vue menyedari kesan menatal marquee/teks Vue menyedari kesan menatal marquee/teks Apr 07, 2025 pm 10:51 PM

Melaksanakan kesan menatal marquee/teks di VUE, menggunakan animasi CSS atau perpustakaan pihak ketiga. Artikel ini memperkenalkan cara menggunakan animasi CSS: Buat teks tatal dan bungkus teks dengan & lt; div & gt;. Tentukan animasi CSS dan tetapkan limpahan: tersembunyi, lebar, dan animasi. Tentukan frasa key, set Transform: TranslateX () pada permulaan dan akhir animasi. Laraskan sifat animasi seperti tempoh, kelajuan tatal, dan arah.

Cara Menanyakan Versi Vue Cara Menanyakan Versi Vue Apr 07, 2025 pm 11:24 PM

Anda boleh menanyakan versi VUE dengan menggunakan Vue Devtools untuk melihat tab VUE dalam konsol penyemak imbas. Gunakan NPM untuk menjalankan arahan "NPM LIST -G VUE". Cari item VUE dalam objek "Dependencies" fail Package.json. Untuk projek Vue CLI, jalankan perintah "Vue -version". Semak maklumat versi di & lt; skrip & gt; Tag dalam fail HTML yang merujuk kepada fail VUE.

See all articles