Vue ミックスインの詳しい説明

Vue ミックスインの詳しい説明

ここに画像の説明を挿入

ローカルミックスイン

<テンプレート>
  <div>
    <h2 @click="showName">生徒名: {{name}}</h2>
    <h2>学生の性別: {{sex}}</h2>
  </div>
</テンプレート>

<スクリプト>
  //混合インポートを導入する {
    フンヘ、フンヘ2
  } '../mixin' から
  エクスポートデフォルト{
    名前: '学生'、
    データ() {
      戻る {
        名前: '張三'、
        性別: '男性'
      }
    },
    ミックスイン: [hunhe,hunhe2]
  }

</スクリプト>

エクスポートconst hunhe = {
    メソッド: {
        表示名() {
            アラート(this.name)
        }
    }
}

エクスポートconst hunhe2 = {
    データ() {
        戻る {
            x: 100,
            y: 200
        }
    }

}

グローバル ミックスイン

'./mixin' から {hunhe, hunhe2 } をインポートします
Vue.mixin(笑)
Vue.mixin(hunhe2)

ここに画像の説明を挿入

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue3 Composition API が Vue Mixins に取って代わる仕組みについて簡単に説明します。
  • Vueでミックスインを使用する方法
  • Vue ミックスインの使用方法とオプションのマージの詳細な説明
  • Web プロジェクト開発 VUE の混合と継承の原則
  • Vue のミックスインの使用方法の詳細な説明
  • Vue3 ミックスインの使い方

<<:  CSS3は、ズームと回転を実現するためにscale()とrotate()を使用します。

>>:  ブログデザイン ウェブデザイン デビュー

推薦する

MySQL 5.7.23 のインストールと設定のグラフィックチュートリアル

この記事では、mysql5.7.23 の詳細なインストールプロセスを記録し、皆さんと共有します。 1...

Dockerでランナーコンテナを構成する方法

1. ランナーコンテナを作成する mk@mk-pc:~/Desktop$ docker run -d...

MySQL からエクスポートされた scv ファイル内の文字化けやジャンプ行の問題をすばやく解決します

仕事上の理由により、完全なオンライン化(​​つまり、すべてのデータがオンラインで完了し、インポートや...

MySQL インデックス最適化の説明

日常業務では、実行に時間のかかる SQL ステートメントを記録するために、スロー クエリを実行するこ...

Bツリーの削除プロセスの紹介

前回の記事 https://www.jb51.net/article/154157.htm では、B...

CSS フォントの新しい使い方: カラーフォントの実装

デザイナーが特別なイベントのタイトルフォントとして以下のフォントを使用したい場合はどうすればよいでし...

Docker プライマリ ネットワーク ポート マッピング構成

ポートマッピングDocker コンテナを起動する前にポート マッピングを行わないと、コンテナ外部のネ...

Vue.jsはコンポーネントを通じてアイコンを処理します

アイコン処理ソリューションこの記録の目的は、element-plus 以外のアイコンをコンポーネント...

ウェブデザインにおけるインタラクション: ページングの問題に関する簡単な説明

機能: 前のページまたは次のページにジャンプします。要素: ページングの基本要素は、前のページ + ...

CSSカウンター関連属性の学習の詳細な説明

CSS カウンター属性はほぼすべてのブラウザ (IE8 を含む) でサポートされていますが、あまり使...

レイアウトサイズを変更するために左右にドラッグする純粋なCSS

ブラウザの非overflow:auto要素resize伸縮機能を利用して、JavaScript を使...

webpackの遅延読み込みとプリロードの詳細な説明

目次通常の読み込み遅延読み込みプリロードプリロードを使用しないプリロードの使用要約する通常の読み込み...

クールな充電アニメーションを実現する純粋なCSS

CSS のみを使用してどのような充電アニメーション効果を作成できるかを見てみましょう。バッテリーを...

Ajax リクエストにおけるクロスドメイン問題の原因と解決策

目次1. クロスドメインはどのように形成されるのでしょうか? 2. クロスドメインの根本的な原因3....

MySQL で高性能なインデックスを作成するための完全な手順

目次1. インデックスの基本1. インデックスの種類1.1 Bツリーインデックス1.2 ハッシュイン...