Apakah yang perlu saya lakukan jika uniapp $refs tidak dapat diperoleh?

Dalam uniapp, $refs ialah atribut yang sangat penting yang boleh digunakan untuk mendapatkan tika komponen. Walau bagaimanapun, kadangkala apabila menggunakan $refs untuk mendapatkan contoh komponen, ia mungkin tidak diperolehi. Artikel ini akan membincangkan isu ini.

1. Apakah itu $refs

$refs ialah atribut khas dalam Vue yang boleh digunakan untuk mendapatkan contoh komponen atau elemen dom. Perkara yang sama berlaku dalam uniapp.

Kami boleh mencipta objek $refs dengan menambahkan atribut ref pada komponen:

<template>
  <view ref="myComponent"></view>
</template>
<script>
  export default{
    onReady(){
      console.log(this.$refs.myComponent)
    }
  }
</script>

Dalam kod di atas, kami menambah atribut ref pada komponen paparan dan menamakannya "myComponent ". Selepas tika komponen sedia, kita memperoleh tika komponen melalui ini.$refs.myComponent.

2. Masalah yang mungkin menyebabkan $get

Dalam uniapp, apabila menggunakan $refs of get untuk mendapatkan contoh komponen, ia mungkin tidak diperolehi. Sebabnya adalah seperti berikut:

1. Masa pemerolehan yang salah

Dalam uniapp, kitaran hayat komponen adalah sangat penting. Jika anda menggunakan $refs untuk mendapatkan contoh komponen pada awal kitaran hayat komponen, anda mungkin tidak boleh mendapatkannya. Dalam kes ini, kita boleh menggunakan fungsi uni.nextTick() untuk memastikan bahawa masa pemerolehan adalah betul.

<template>
  <my-component ref="myComponent"></my-component>
</template>
<script>
  export default{
    onReady(){
      uni.nextTick(()=>{
        console.log(this.$refs.myComponent)
      })
    }
  }
</script>

Dalam kod di atas, kami telah menambah atribut ref pada komponen komponen saya. Selepas contoh komponen sedia, kami memastikan ketepatan masa pemerolehan melalui fungsi uni.nextTick().

2. Komponen tidak menetapkan atribut ref

Masalah ini agak mudah Jika komponen tidak menetapkan atribut ref, maka $get tidak boleh mendapatkan contoh komponen . Dalam kes ini, kita hanya perlu menambah atribut ref untuk menyelesaikan masalah.

3. Dapatkan contoh komponen yang tidak wujud

Kaedah $get mengembalikan tika komponen Jika kita menghantar contoh komponen yang tidak wujud semasa memanggil, $get Methods juga tidak boleh mengembalikan contoh komponen. Oleh itu, kita perlu mengesahkan contoh komponen masuk.

<template>
  <my-component ref="myComponent"></my-component>
</template>
<script>
  export default{
    onReady(){
      const myComponent = this.$refs.myComponent;
      if(myComponent){
        console.log(myComponent)
      }else{
        console.error("组件实例不存在")
      }
    }
  }
</script>

Dalam kod di atas, kami mula-mula menetapkan myComponent kepada contoh komponen yang diperoleh, dan kemudian menilainya. Jika myComponent wujud, contoh komponen adalah output jika ia tidak wujud, mesej ralat "Instance komponen tidak wujud" adalah output.

3. Masalah yang mungkin menyebabkan $refs tidak diperolehi

Selain masalah kaedah $get, terdapat juga beberapa faktor yang mungkin menyebabkan $refs tidak dapat memperolehi contoh komponen.

1. $refs digunakan dalam templat

Templat ialah sebahagian daripada komponen dalam uniapp dan ia boleh digunakan di dalam komponen. Walau bagaimanapun, apabila menggunakan $refs di dalam templat untuk mendapatkan contoh komponen, ia mungkin tidak diperolehi. Ini kerana templat dijana lebih awal daripada tika komponen, jadi jika kami menggunakan $refs di dalam templat untuk mendapatkan tika komponen, kami tidak akan dapat mendapatkannya. Cara untuk mengelakkan masalah ini adalah dengan meletakkan $refs di dalam contoh komponen dan menggunakan fungsi uni.nextTick() dengan sewajarnya.

<template>
  <my-component></my-component>
</template>
<script>
  export default{
    components:{
      myComponent:{
        template:`
        <view ref="myComponent"></view>
        `,
        onReady(){
          uni.nextTick(()=>{
            console.log(this.$refs.myComponent)
          })
        }
      }
    }
  }
</script>

Dalam kod di atas, kami mentakrifkan komponen paparan di dalam komponen komponen saya dan menambah atribut ref. Selepas contoh komponen paparan sedia, kami memastikan ketepatan masa pemerolehan melalui fungsi uni.nextTick().

2. Masalah pemindahan data antara komponen induk dan komponen anak

Dalam uniapp, tika komponen boleh mendapatkan data yang diluluskan oleh komponen induk melalui atribut props. Oleh itu, jika kita menggunakan $refs dalam komponen induk untuk mendapatkan contoh komponen anak, tetapi komponen anak tidak menetapkan atribut ref, maka $refs tidak akan dapat mendapatkan contoh komponen anak.

//子组件
<template>
  <view>这是一个子组件</view>
</template>
<script>
  export default{
    props:['msg']
  }
</script>

//父组件
<template>
  <my-component/>
</template>
<script>
  export default{
    components:{
      myComponent:{
        template:`
        <child-component></child-component>
        `,
        onReady(){
          console.log(this.$refs.childComponent)    //获取不到子组件实例
        }
      }
    }
  }
</script>

Dalam kod di atas, kami menggunakan $refs dalam komponen induk untuk mendapatkan contoh komponen anak, tetapi komponen anak tidak menetapkan atribut ref. Oleh itu, kita tidak boleh mendapatkan contoh komponen kanak-kanak. Untuk menyelesaikan masalah ini, kita boleh menambah atribut ref dalam komponen anak dan menyerahkannya kepada komponen induk.

//子组件
<template>
  <view>这是一个子组件</view>
</template>
<script>
  export default{
    props:['msg'],
    mounted(){
      this.$emit("getChild",this)       //将子组件实例传递给父组件
    }
  }
</script>

//父组件
<template>
  <my-component @getChild="getChild"/>
</template>
<script>
  export default{
    components:{
      myComponent:{
        template:`
        <child-component ref="childComponent"></child-component>
        `,
        methods:{
          getChild(instance){
            console.log(instance.$el)      //获取到子组件的el元素
            console.log(this.$refs.childComponent)    //获取到子组件实例
          }
        }
      }
    }
  }
</script>

Dalam kod di atas, kami mentakrifkan kitaran yang dipasang dalam komponen anak, di mana kami menghantar contoh komponen anak kepada komponen induk melalui ini.$emit(). Komponen induk mendapatkan contoh komponen anak melalui atribut ref komponen anak.

4. Ringkasan

$ref ialah atribut yang sangat penting dalam uniapp, yang boleh digunakan untuk mendapatkan kejadian komponen dan elemen dom. Apabila menggunakan $refs, kita perlu memberi perhatian kepada perkara berikut:

1. Masa pemerolehan mestilah betul;
2. komponen perlu menetapkan atribut ref; 🎜> contoh komponen perlu Pas yang betul;
3. Anda perlu menggunakan fungsi uni.nextTick() apabila perlu.

Atas ialah kandungan terperinci Apakah yang perlu saya lakukan jika uniapp $refs tidak dapat diperoleh?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!