uniapp が this.$refs をサポートしていない場合はどうすればよいですか?

開発者として、uniapp フレームワークを使用して開発している場合、いくつかの問題が発生する可能性があります。その 1 つは、uniapp が this.$refs 構文の使用をサポートしていないことです。この記事では、この問題とその解決方法について説明します。

まず第一に、this.$refs とは何か、そしてそれが何をするのかを理解する必要があります。 Vue.js フレームワークでは、this.$refs はサブコンポーネントまたは DOM 要素への参照を取得するために使用されます。 this.$refs を使用すると、コンポーネントや DOM 要素に簡単にアクセスして変更できます。ただし、uniapp フレームワークは小さなプログラム拡張に基づく開発モデルを採用しているため、this.$refs は uniapp ではサポートされていません。

それでは、uniapp でサブコンポーネントまたは DOM 要素の参照を取得するにはどうすればよいでしょうか?その答えは、uniappが提供するAPIを利用して動作させることです。 uniapp は、univerify 承認検証、uni.request ネットワーク リクエスト、uni.showToast プロンプト ボックスなど、多くの API を提供します。サブコンポーネントまたは DOM 要素への参照を取得するには、uni-app が提供する API uni.createSelectorQuery() を使用できます。

uni.createSelectorQuery() は、ページ上のノードを選択するメソッドを提供し、クエリ オブジェクトを返します。このクエリ オブジェクトでは、select、selectAll、boundingClientRect など、クエリ オブジェクトが提供するメソッドを使用して、必要なノード情報を取得できます。例を見てみましょう:

<template>
  <view>
    <button @click="handleClick">获取节点信息</button>
    <view ref="myView">{{ message }}</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello uniapp!',
      myViewRect: null
    }
  },
  methods: {
    handleClick() {
      uni.createSelectorQuery().select('.myView').boundingClientRect(rect => {
        this.myViewRect = rect
        console.log(this.myViewRect)
      }).exec()
    }
  }
}
</script>

この例では、view タグを使用し、ref 属性を view タグに設定し、myView という名前の属性を設定します。この例では、this.myViewRect プロパティを通じて myView ノードの情報を取得します。ボタンをクリックすると、uni.createSelectorQuery() を使用し、.select() メソッドを使用して必要なノードを選択し、次に .boundingClientRect() メソッドを使用してこのノードの情報を取得し、最後に を使用します。 exec() メソッドを使用してこの操作を実行します。コールバック関数で、myView ノードの情報を取得し、それを myViewRect プロパティに割り当て、このプロパティをコンソールに出力しました。

つまり、uniapp フレームワークは this.$refs 構文の使用をサポートしていませんが、他のメソッドを使用してサブコンポーネントまたは DOM 要素への参照を取得できます。 uni.createSelectorQuery() API をマスターすると、ビジネス ニーズを達成するために必要なノード情報を簡単に取得できるようになると思います。

以上がuniapp が this.$refs をサポートしていない場合はどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。