vue refs mengubah suai sifat

Vue ialah rangka kerja progresif untuk membina antara muka pengguna Ia mudah, fleksibel dan cekap, dan digunakan secara meluas dalam pembangunan bahagian hadapan. Antaranya, ref ialah ciri penting yang disediakan oleh Vue, yang membolehkan pembangun mengakses terus elemen DOM dan contoh komponen untuk mengubah suai sifat atau kaedah panggilan. Dalam artikel ini, kami akan meneroka teknik berkaitan mengubah suai sifat rujukan Vue untuk membantu pembaca menguasai fungsi penting ini dengan lebih baik.

1. Pengenalan kepada Vue Refs

Dalam Vue, ref ialah atribut khas yang digunakan untuk mengakses komponen atau elemen DOM. Ia mempunyai dua cara penulisan:

1. Borang rentetan:

   <template>
     <div ref="myRef"></div>
   </template>

2. Borang fungsi:

   <template>
     <div ref="myRef"></div>
   </template>
   
   <script>
   export default {
     methods: {
    log() {
      console.log(this.$refs.myRef);
    }
     }
   }
   </script>

   refs boleh digunakan Untuk akses contoh komponen, elemen DOM atau subkomponen, kaedahnya biasanya mengisytiharkannya dalam templat dan kemudian mengaksesnya melalui ini.$refs dalam kod JavaScript komponen. Perlu diingatkan bahawa rujukan hanya boleh ditetapkan selepas komponen diberikan, jadi disyorkan untuk menggunakannya dalam fungsi kitaran hayat yang dipasang.

2. Vue Refs mengubah suai atribut

1. Ubah suai atribut elemen DOM

Anda boleh mengubah suai atribut DOM secara langsung elemen melalui rujukan , sebagai contoh, ubah suai pemegang tempat kotak teks:

<template>
  <div>
    <input type="text" ref="myInput">
  </div>
</template>

<script>
  export default {
    mounted() {
      this.$refs.myInput.placeholder = '请输入用户名';
    }
  }
</script>

Apabila pemaparan komponen selesai, fungsi kitaran hayat yang dipasang akan dipanggil dan rujukan boleh digunakan dalam fungsi ini untuk mengubah suai atribut daripada elemen DOM.

2. Pengubahsuaian atribut komponen

refs juga boleh digunakan untuk mengubah suai atribut komponen Dalam kod JavaScript komponen, anda boleh mendapatkan contoh komponen melalui this.$refs, dan kemudian anda boleh mengubah suai Komponen menjalankan operasi seperti menambah, memadam, mengubah suai dan menyemak atribut:

<template>
  <div>
    <my-component ref="myComp"></my-component>
    <button @click="changeText">点击修改</button>
  </div>
</template>

<script>
  import MyComponent from './MyComponent.vue'
  export default {
    components: {MyComponent},
    methods: {
      changeText() {
        this.$refs.myComp.text = '新的文本内容';
      }
    }
  }
</script>

Dalam contoh di atas, kami memanggil kaedah changeText melalui acara klik butang , dan kemudian gunakan rujukan untuk mendapatkan contoh komponen dan mengubah suai atribut teks komponen.

Perlu diambil perhatian bahawa jika anda ingin mengubah suai sifat komponen, anda perlu memastikan bahawa sifat itu boleh diubah suai, iaitu harta itu bukan baca sahaja (seperti props). Jika anda ingin mengubah suai sifat dalam prop, adalah disyorkan untuk memanggil kaedah $emit untuk memberitahu komponen induk untuk membuat pengubahsuaian.

3. Kaedah komponen panggilan

Selain dapat mengubah suai sifat komponen, rujukan juga boleh digunakan untuk memanggil kaedah komponen. Dalam kod JavaScript komponen, anda boleh mendapatkan contoh komponen melalui $refs, dan kemudian memanggil kaedah komponen:

<template>
  <div>
    <my-component ref="myComp"></my-component>
    <button @click="callMyMethod">调用组件方法</button>
  </div>
</template>

<script>
  import MyComponent from './MyComponent.vue'
  export default {
    components: {MyComponent},
    methods: {
      callMyMethod() {
        this.$refs.myComp.myMethod();
      }
    }
  }
</script>

Dalam contoh di atas, kami memanggil kaedah myMethod dalam komponen my-component pastikan kaedah tersebut adalah Awam, iaitu, ditakrifkan dalam kaedah komponen.

Perlu diingat bahawa kaedah komponen panggilan bukan sahaja boleh dilaksanakan melalui rujukan, tetapi juga melalui acara, $emit, dsb. Walau bagaimanapun, menggunakan kaedah rujukan untuk memanggil mempunyai kelebihan keterusterangan dan kesederhanaan, dan boleh mencapai kebolehbacaan dan kebolehselenggaraan kod dengan lebih baik.

3. Ringkasan

Sifat pengubahsuaian Vue Refs ialah salah satu ciri penting rangka kerja Vue Ia boleh digunakan untuk mengakses contoh komponen, elemen DOM atau subkomponen, mengubah suai sifat atau kaedah panggilan. dll. Apabila menggunakan Vue Refs untuk mengubah suai sifat, anda perlu memberi perhatian kepada beberapa butiran, seperti kebolehbacaan, kesederhanaan, jenis sifat yang diubah suai, kaedah untuk dipanggil, dsb. Melalui penjelasan artikel ini, saya percaya pembaca boleh menguasai kemahiran mengubah suai sifat Vue Refs dengan lebih baik dan mengoptimumkan pembangunan aplikasi Vue.

Atas ialah kandungan terperinci vue refs mengubah suai sifat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!