Web インタビュー Vue カスタム コンポーネントと呼び出しメソッド

Web インタビュー Vue カスタム コンポーネントと呼び出しメソッド

輸入:

プロジェクトの要件により、同じコードの一部をコンポーネントにカプセル化し、必要な場所にインポートします。
タグの形で書かれ、
しかし、「vant」コンポーネント ライブラリでは、「ダイアログ ポップアップ ボックス」コンポーネントには 2 つの使用方法があります。

通常、コンポーネントをカスタマイズする場合、通常は方法 2 の形式で使用します。今日は、方法 1 の使用方法を紹介します。

コーディング実装

コンポーネントをプラグインとして使用する

// 表示するコンポーネントをインポートします。import mymodel from '../components/mymodel.vue'
エクスポートデフォルト{
  インストール: 関数 (Vue) {
    // 1.0 mymodel コンポーネントオブジェクトのコンストラクタを取得します。const Mymodel = Vue.extend(mymodel)
    // すべてのvueインスタンスにメソッド$modelを追加します
    Vue.prototype.$model = 関数 () {
      // コンポーネントを表示するには: mymodel
      // 2.0 コンポーネントオブジェクトを作成する const obj = new Mymodel()
      // 3.0 コンポーネントを表示する obj.show = true
      // 4.0 コンポーネントオブジェクトの HTML 構造を取得します。const html = obj.$mount().$el
      // 5.0 ページに HTML 構造をレンダリングします document.body.append(html)
    }
  }
}

使用

<テンプレート>
  <div>
    <h3>通常のコンポーネントメソッドで呼び出す</h3>
    <button @click="fn1">モデルを表示</button>
    <!-- <mymodel :value="show" @input="val => (show = val)"></mymodel> -->
    <mymodel v-model="表示"></mymodel>
    <!-- sync: パラメータがコンポーネントに渡されます: xxx コンポーネントからイベントを受信しました: update:xxx イベントにより xxx が自動的に変更されます -->
    <!-- v-model: パラメータがコンポーネントに渡されます: value イベントがコンポーネントから受信されます: 入力イベントによって value が自動的に変更されます -->
    <h3>js で呼び出す</h3>
    <button @click="fn2">モデルを表示</button>
  </div>
</テンプレート>
<スクリプト>
'../../components/mymodel.vue' から mymodel をインポートします。
エクスポートデフォルト{
  データ () {
    戻る {
      表示:偽
    }
  },
  メソッド: {
    fn1() {
      this.show = true
    },
    fn2() {
      // js メソッド this.$model() を通じてコン​​ポーネントを直接表示します。
    }
  },
  コンポーネント:
    私のモデル: 私のモデル
  }
}
</スクリプト>

<スタイル></スタイル>

以上がWeb面接Vueカスタムコンポーネントと呼び出し方法の詳細です。Web面接Vueの詳細については、123WORDPRESS.COMの他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • Vueコンポーネントをカスタマイズする4つの方法の詳細な説明
  • Vue コンポーネント共通メソッド抽出ミックスイン実装
  • Vue共通コンポーネントを抽象化する方法
  • Vueはカスタムパブリックコンポーネントを実装し、パブリックメソッドを抽出します

<<:  MySQLがクエリキャッシュをキャンセルした理由

>>:  Linuxコマンド履歴の調整方法の詳細な説明

推薦する

MySQL データベースの型変換のための CAST 関数と CONVERT 関数の説明

MySQL のCAST()およびCONVERT()関数を使用すると、ある型の値を取得し、別の型の値を...

MySQL トランザクション、分離レベル、ロックの使用例の分析

この記事では、例を使用して、MySQL トランザクション、分離レベル、およびロックの使用について説明...

jQueryはバウンドボールゲームを実装します

この記事では、バウンドボールゲームを実装するためのjQueryの具体的なコードを参考までに共有します...

CocosCreatorでクールなレーダーチャートを描く方法

目次序文プレビュー文章グラフィックコンポーネントプロパティ機能グリッドを描く軸角度を計算するスケール...

VUE レンダリング機能の使い方と詳細な説明

目次序文レンダリングの役割レンダリング機能の説明レンダリングとテンプレートの違いレンダリング例要約す...

Douyin ロゴを作成する手順の CSS3 分析

「Tik Tok」も大人気で、ユーザー数は7億人と言われています。今日は、注目を集めるためにTikT...

iframe を使用して Web ページに他の Web ページを埋め込む方法

iframe の使い方:コードをコピーコードは次のとおりです。 <DIV align=cent...

MySQL の general_log ログの知識ポイントの紹介

以下の操作デモンストレーションはすべて MySQL バージョン 5.6.36 に基づいています。仕事...

Vue.js でフォントを読み込む正しい方法

目次font-faceでフォントを正しく宣言するフォントをプリロードするフォントをホストするにはli...

ノードスクリプトで自動サインインと抽選機能を実現

目次1. はじめに2. 準備3. スクリプトプロジェクトの構築4. コードの作成と実行5. まとめと...

Windows で MySQL 5.7.17 をインストールし、エンコードを utf8 に設定する方法

ダウンロードMySQL 公式ダウンロード、Windows (x86、64 ビット)、ZIP アーカイ...

my.cnf (my.ini) 重要なパラメータの最適化設定手順

MyISAM ストレージエンジンMyISAM ストレージ エンジンは、書き込みよりも読み取りが多く、...

Vue 条件付きレンダリング v-if と v-show

目次1. 動詞-if 2. <template> で v-if を使用する3. キーを使...

CSS スタイルをプログラムで処理するためのサンプル コード

プログラム的アプローチの利点1. スタイルの分散を避けるためのグローバルコントロール2. シンプルな...