Vue を使用してカスタム グローバル コンポーネントを作成する方法

ここ 2 日間で Vue.js を勉強してきましたが、コンポーネントに関する知識は非常に多く、非常に重要であると感じました。そこで、この記事では主に Vue でのカスタム グローバル コンポーネントの実装方法を紹介します。この記事はサンプル コードを通じてそれを紹介しており、誰もが学習したり vue を使用したりできるよう、学習の参考となる価値があります。必要な場合は、エディターに従って一緒に学習することができます。

はじめに

開発をしていると、自分でプラグインを書いて、自分で作ったプラグインを使いたいと思うことがありますが、そのときは強い達成感が得られます。今日、長い間悩んでいた問題が解決したので、今後の参考のために記録しておきます。

関係する知識ポイントは、Vue.js 公式 Web サイトのチュートリアルにあるプラグインの使用です。その方法は次のとおりです。

私が遭遇した最初の問題は、カスタマイズしたコンポーネントを複数回呼び出す必要がある場合です。プロジェクト内の他のコンポーネント、そして私の以前の解決策は、必要な場所を引用するだけでした。これにより、間違いなく多くのコードの重複が追加されます。 Vue.js の一部の UI フレームワークを使用する場合、プロジェクトのエントリ ファイルにプラグインをインポートして、Vue.use('プラグイン名') に従うだけでよいことに気付きました。このようにして、このフレームワークのコンポーネントとメソッドはプロジェクト全体で使用できます。

情報を調べた結果、カスタムコンポーネントはインストールメソッドを提供する必要があることがわかりました

import sideblockComponent from './sideBlock'
const defaultComponentName = 'sidebar'

const Sidebar = {
 install(Vue, options = {}) {
 const componentName = options.componentName || defaultComponentName //提供可选的组件名
 Vue.component(componentName, sideblockComponent)
 }
}
export default Sidebar

このように書いたコンポーネントを導入し、オブジェクトを作成してインストールメソッドを含め、Vue.component()を使用します メソッドは Vue グローバル コンポーネントとして登録され、最後にデフォルトのエクスポートでこのオブジェクトがエクスポートされます。

最も重要なステップが完了したので、次のステップが最も重要なステップです。

作成したコンポーネントをプロジェクトのエントリ ファイルに導入し、Vue.use (導入されたコンポーネント) を通じてプラグインを使用する必要があります。 Vue.component()方法注册成Vue全局组件，最后export default导出这个对象。

到此最关键的步骤已经做好，接下来是最最关键的步骤。

我们需要在项目的入口文件中引入刚刚做好的组件，并且通过Vue.use(引入的组件)来使用插件。

到此，一个全局Vue组件就弄好了。我们在提供install方法的同时也可以通过Vue.$emit()的方法来触发组件中的方法，但最近在使用Element UI时发现他们组件中的方法一般都是通过Vue.$refs()

この時点で、グローバル Vue コンポーネントの準備が整いました。インストール メソッドを提供していますが、Vue.$emit() メソッドを通じてコン​​ポーネント内のメソッドをトリガーすることもできます。しかし、最近 Element UI を使用すると、コンポーネント内のメソッドが次のようになっていることがわかりました。通常は Vue.$refs() を通じてトリガーされます。具体的な理由は今後の研究に委ねられます。

vue $refs 基本的な使い方

<p id="app">
<input type="text" ref="input1"/>
<button @click="add">添加</button>
</p>

<script>
new Vue({
  el: "#app",
  methods:{
  add:function(){
    this.$refs.input1.value ="22"; //this.$refs.input1 减少获取dom节点的消耗
    }
  }
})
</script>

一般的にDOM要素を取得するには、document.querySelector(".input1")でdomノードを取得し、input1の値を取得する必要があります。

しかし、ref でバインドした後は、dom ノードを取得する必要はありません。input1 を上記の入力に直接バインドし、それを $refs で呼び出すことができます。

次に、これを JavaScript で呼び出します: this.$refs.input1 こうすることで、dom ノードの取得にかかる消費を減らすことができます

上記は、私が皆さんのためにまとめたものです。将来皆さんのお役に立てれば幸いです。

関連記事:

axiosを使用してvueにファイルをアップロードする

gulpを使用して完全なプロジェクトプロセスを作成する方法

jsのオブジェクトに配列を追加する方法

🎜

以上がVue を使用してカスタム グローバル コンポーネントを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。