vue で $ は何を意味しますか?

Vue.js では、$ 記号は Vue インスタンス自体を表し、コンポーネント データ、メソッド、ライフサイクル メソッドへの迅速なアクセスを提供します。これは this キーワードに相当します。データへのアクセス: $data 呼び出しメソッド: $methods ライフサイクル メソッドの実行: $ ライフ サイクル メソッド、ネストされたコンポーネント インスタンスへのアクセス: $refs Vue インスタンス属性の取得: $el (DOM 要素) または $router

Vue における $ の意味

Vue.js では、ドル記号 ($) は、以下へのクイック アクセスを提供する特別なオブジェクトです。 Vue インスタンス。これは this キーワードと同等ですが、明示的なバインディングなしで任意の Vue コンポーネントまたはメソッド内で使用できるため、より便利です。

目的

$ 主に次の目的に使用されます:

• データへのアクセス: $ はデータです。 Vue インスタンスのプロパティ。コンポーネントのデータ プロパティにアクセスするために使用できます。
• アクセス メソッド: $ は Vue インスタンスのメソッド属性で、コンポーネントのメソッドを呼び出すために使用できます。
• アクセス ライフ サイクル メソッド: $ は Vue インスタンスのライフ サイクル メソッドで、コンポーネントのライフ サイクルのさまざまな段階でコードを実行するために使用できます。
• 他のインスタンスにアクセスする: ネストされたコンポーネントでは、$ を使用して親コンポーネントまたは子コンポーネントのインスタンスにアクセスできます。
• Vue インスタンスのプロパティにアクセスする: $ を使用して、$el (DOM 要素) や ## などの Vue インスタンスのプロパティにアクセスできます。 #$router (Vue Router インスタンス)。

例

$:

<code class="javascript">// 访问数据
console.log(this.data.message); // 与 $data.message 等效

// 访问方法
this.methods.greet(); // 与 $methods.greet() 等效

// 访问生命周期方法
created() {
  // 这里可以访问 this 或 $
  console.log(this.$el); // DOM 元素
}

// 访问嵌套组件实例
<child-component ref="child"></child-component>
this.$refs.child.doSomething(); // 调用子组件的方法</code>

ヒント

の使用例をいくつか示します。

$ を多用しないようにしてください。コードが理解しにくくなります。
• メソッドまたはライフサイクル フック内で $ を使用する場合は、必ず
• this と同じ意味で使用してください。
ネストされたコンポーネントの場合、$ を使用して子コンポーネント インスタンスにアクセスする場合は、テンプレートに
• ref 属性を必ず追加してください。

以上がvue で $ は何を意味しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。