uniapp $refs が取得できない場合はどうすればよいですか?-uni-app-php.cn

uniapp $refs が取得できない場合はどうすればよいですか?

PHPz

リリース： 2023-04-23 10:22:27

オリジナル

8547 人が閲覧しました

uniapp では、$refs はコンポーネントのインスタンスを取得するために使用できる非常に重要な属性です。ただし、$refs を使用してコンポーネントインスタンスを取得すると、取得できない場合があります。この記事ではこの問題について説明します。

1. $refs とは

#$refs は Vue の特別な属性で、コンポーネントインスタンスまたは dom 要素を取得するために使用できます。ユニアプリでも同様です。

コンポーネントに ref 属性を追加することで $refs オブジェクトを作成できます:

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

ログイン後にコピー

上記のコードでは、ビューコンポーネントに ref 属性を追加し、「myComponent」という名前を付けました。コンポーネントインスタンスの準備ができたら、this.$refs.myComponent を通じてコンポーネントインスタンスを取得します。

2. $get

uniapp において、get の $refs を使用してコンポーネントのインスタンスを取得する場合、取得できない場合があります。理由は次のとおりです。

uniapp では、コンポーネントのライフサイクルが非常に重要です。コンポーネントのライフサイクルの早い段階で $refs を使用してコンポーネントインスタンスを取得すると、取得できない可能性があります。この場合、uni.nextTick() 関数を使用して、取得時間が正しいことを確認できます。

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

ログイン後にコピー

上記のコードでは、my-component コンポーネントに ref 属性を追加しました。コンポーネントインスタンスの準備ができたら、uni.nextTick() 関数を通じて取得タイミングが正しいことを確認します。

この問題は比較的単純です。コンポーネントが ref 属性を設定しない場合、$get はコンポーネントインスタンスを取得できません。この場合、問題を解決するには ref 属性を追加するだけです。

$get メソッドはコンポーネントインスタンスを返します。呼び出し時に存在しないコンポーネントインスタンスを渡すと、$get メソッドが返されます。コンポーネントのインスタンスを返すこともできません。したがって、受信したコンポーネントインスタンスを検証する必要があります。

<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>

ログイン後にコピー

上記のコードでは、取得したコンポーネントインスタンスにmyComponentを代入してから判定しています。 myComponentが存在する場合はコンポーネントインスタンスが出力され、存在しない場合は「コンポーネントインスタンスが存在しません」というエラーメッセージが出力されます。

3. $refs が取得できない原因となる可能性がある問題

$get メソッドの問題に加えて、$refs が取得できない原因となる可能性のあるいくつかの要因もあります。コンポーネントのインスタンス。

テンプレートは uniapp のコンポーネントの一部であり、コンポーネント内で使用できます。ただし、テンプレート内で $refs を使用してコンポーネントのインスタンスを取得すると、取得できない場合があります。これは、テンプレートがコンポーネントインスタンスよりも先に生成されるため、テンプレート内で $refs を使用してコンポーネントインスタンスを取得すると、コンポーネントインスタンスを取得できなくなります。この問題を回避する方法は、コンポーネントインスタンス内に $refs を配置し、uni.nextTick() 関数を適切に使用することです。

<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>

ログイン後にコピー

上記のコードでは、my-component コンポーネント内に view コンポーネントを定義し、ref 属性を追加します。ビューコンポーネントインスタンスの準備ができたら、uni.nextTick() 関数を通じて取得タイミングが正しいことを確認します。

uniapp では、コンポーネントインスタンスは、親コンポーネントから渡されたデータを props 属性を通じて取得できます。したがって、親コンポーネントで $refs を使用して子コンポーネントのインスタンスを取得しても、子コンポーネントが ref 属性を設定していない場合、$refs は子コンポーネントのインスタンスを取得できません。

//子组件
<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>

ログイン後にコピー

上記のコードでは、親コンポーネントで $refs を使用して子コンポーネントのインスタンスを取得していますが、子コンポーネントは ref 属性を設定しません。したがって、子コンポーネントのインスタンスを取得できません。この問題を解決するには、子コンポーネントに ref 属性を追加し、それを親コンポーネントに渡すことができます。

//子组件
<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>

ログイン後にコピー

上記のコードでは、子コンポーネントにマウントされたサイクルを定義し、その間に this.$emit() を通じて子コンポーネントのインスタンスを親コンポーネントに渡します。親コンポーネントは、子コンポーネントの ref 属性を通じて子コンポーネントのインスタンスを取得します。

4. 概要

$ref は uniapp の非常に重要な属性であり、コンポーネントインスタンスと dom 要素を取得するために使用できます。 $refs を使用する場合、次の点に注意する必要があります: