Vue での $refs と $el の使用法は何ですか-Vue.js-php.cn

Vue での $refs と $el の使用法は何ですか

WBOY

リリース： 2022-02-15 15:34:28

オリジナル

5040 人が閲覧しました

使用法: 1. "$refs" は要素またはサブコンポーネントの参照情報を登録するために使用されます。構文は "this.$refs.(ref value)" または "this.$refs.(ref value)" です。 .method () "; 2. "$el" は、Vue インスタンスに関連付けられた DOM 要素を取得するために使用され、構文は "this.$refs.component" です。

Vue での $refs と $el の使用法は何ですか

この記事の動作環境: Windows 10 システム、Vue バージョン 2.9.6、DELL G3 コンピューター。

vue での $refs と $el の使用法は何ですか

ref は要素またはサブコンポーネントの参照情報を登録するために使用されます

ref 3 つのタイプがあります使用法:

1. 通常の要素に ref を追加し、this.$refs. (ref 値) を使用して dom 要素を取得します

2. ref をサブコンポーネントに追加し、 use this.$refs. (ref値) 取得されるのはコンポーネントのインスタンスであり、コンポーネントのすべてのメソッドが利用可能です。メソッドを使用する場合は、this.$refs.(ref value).method() として直接使用できます。

3. v-for と ref を使用して配列または dom ノードのセットを取得する方法

v-for トラバーサルを通じて異なる ref を追加する場合は、必ず : 記号を追加してください。、つまり: ref = something Variable;

これは他の属性と同じです。固定値の場合は、: 記号を追加する必要はありません。変数の場合は、忘れずに追加してください。：サイン。 (コロンが追加されている場合は、その後に変数または式が続くことを意味します。コロンがない場合は、対応する文字列定数 (String) を意味します。

注意すべき落とし穴は次のとおりです。

1, 参考 DOM のレンダリングが完了した後に使用できるようにする必要があります。使用するときは、DOM がレンダリングされていることを確認してください。たとえば、ライフサイクルの mount(){} フックで呼び出すか、 in this.$nextTick(()=>{}) .

2. ref がループアウトされ、複数の重複した名前がある場合、ref の値は配列になります。

vm.$el

Vue インスタンスに関連付けられた DOM 要素を取得します;

例, カスタムコンポーネント tabControl を取得し、その OffsetTop を取得したいのですが、最初にコンポーネントを取得する必要があります。

コンポーネントに属性 ref='a name (tabControl2)' を設定します。

その後、this.$refs.tabControl2 はコンポーネントを取得します

覚えておいてください: ref 属性、コンポーネントを取得するときは、$refs