Bolehkah ref mendapatkan contoh vue? Beberapa cara untuk mengakses kejadian

Dalam Vue, tika komponen dicipta daripada tika Vue. Dalam komponen, kita boleh menggunakan ref untuk mendapatkan rujukan kepada elemen DOM atau contoh komponen. Jadi, bolehkah saya menggunakan ref untuk mendapatkan contoh Vue?

Jawapan ringkasnya ialah tidak. Kerana contoh Vue bukan elemen atau komponen DOM, tetapi objek JavaScript. Walaupun tika Vue akhirnya akan dipaparkan sebagai elemen DOM pada halaman, menggunakan ref dalam komponen hanya boleh mendapatkan rujukan kepada elemen DOM atau tika komponen dan tidak boleh mendapatkan tika Vue secara langsung.

Maka persoalannya ialah, bagaimana jika anda perlu mengakses contoh Vue? Berikut ialah beberapa kaedah biasa:

1. Gunakan Vue.mixin untuk mencampurkan secara global

Kita boleh menggunakan Vue.mixin untuk mencampurkan secara global untuk mencampurkan objek ke dalam semua komponen Vue . Dalam objek mixin, kita boleh menentukan dicipta (atau fungsi cangkuk kitaran hayat lain), dan kemudian contoh Vue boleh diakses melalui ini. Kod sampel adalah seperti berikut:

// mixin.js 
export default { 
  created() { 
    console.log('Vue instance:', this.$root); 
  } 
} 
// main.js 
import Vue from 'vue'; 
import App from './App.vue'; 
import mixin from './mixin'; 

Vue.mixin(mixin); 

new Vue({ 
  render: h => h(App), 
}).$mount('#app');

Fungsi cangkuk yang dicipta ditakrifkan dalam mixin.js untuk mengeluarkan tika Vue apabila komponen dicipta. Dalam main.js kami menggunakan mixin secara global.

2. Gunakan $root untuk mengakses tika Vue

Seperti yang dinyatakan sebelum ini, tika Vue boleh diakses melalui ini.$root. Dalam komponen, kita juga boleh mendapatkan contoh Vue melalui ini.$root. Apabila menggunakan ini.$root dalam komponen untuk mengakses tika Vue, anda perlu memberi perhatian Anda mesti menggunakannya selepas tika Vue dibuat, jika tidak, undefined akan dikembalikan. Kod sampel adalah seperti berikut:

<template> 
  <div> 
    <p>Using $root to access Vue instance:</p> 
    <button @click="logVueInstance">Log Vue Instance</button> 
  </div> 
</template> 

<script> 
  export default { 
    methods: { 
      logVueInstance() { 
        console.log('Vue instance:', this.$root); 
      } 
    } 
  } 
</script>

mentakrifkan kaedah dalam komponen untuk mengeluarkan tika Vue apabila butang diklik.

3. Gunakan $parent untuk mengakses tika Vue

Selain menggunakan $root, kita juga boleh mengakses tika Vue bagi komponen induk melalui $parent komponen induk ialah komponen akar, maka Ia adalah keseluruhan contoh Vue. Ia juga penting untuk ambil perhatian bahawa komponen induk mestilah telah dibuat sebelum menggunakan akses $parent. Kod sampel adalah seperti berikut:

<template> 
  <div> 
    <p>Using $parent to access Vue instance:</p> 
    <button @click="logVueInstance">Log Vue Instance</button> 
  </div> 
</template> 

<script> 
  export default { 
    methods: { 
      logVueInstance() { 
        console.log('Vue instance:', this.$parent.$root); 
      } 
    } 
  } 
</script>

mentakrifkan kaedah dalam komponen Apabila butang diklik, akses contoh Vue komponen induk melalui $parent dan keluarkannya.

Untuk meringkaskan, walaupun tika Vue tidak boleh diakses terus melalui ref, kita boleh menggunakan Vue.mixin, $root, $parent dan kaedah lain untuk mengakses tika Vue dalam komponen.

Atas ialah kandungan terperinci Bolehkah ref mendapatkan contoh vue? Beberapa cara untuk mengakses kejadian. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!