Vueでグローバルコンポーネントの実現方法をカスタマイズします。

前言
私達は開発をする時、自分でプラグインを書いて自分のプラグインを使うことができると思っています。今日は長い間悩んでいた問題を解決しました。今記録して、後で参考にします。
知識点に関してはVue.js公式サイト教程のプラグインが使用されます。
方法は以下の通りです
まず私が会った問題は私がカスタマイズしたコンポーネントがプロジェクトの中で他のコンポーネントで何度も呼び出される必要があるなら、私の前の解決方法は簡単で、どこで引用する必要がありますか？これは多くのコードの繰り返しを増加させるに違いない。
Vue.jsの一部のUIフレームを使用すると、プロジェクトの入り口ファイルの中でimportというプラグインだけが必要であり、Vue.useに続くことに気づく。このようにして、プロジェクト全体でこのフレームのセットと方法を使うことができます。
資料を見て、カスタムコンポーネントはinstall方法を提供する必要があります。

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

const Sidebar = {
 install(Vue, options = {}) {
 const componentName = options.componentName || defaultComponentName //        
 Vue.component(componentName, sideblockComponent)
 }
}
export default Sidebar

このように自分で作成したコンポーネントを導入し、オブジェクトを作成し、install方法を含み、Vue.component()方法でVueグローバルコンポーネントに登録し、最後にexport defaultでこのオブジェクトを導出する。
ここで一番重要なステップはもうできました。次は一番重要なステップです。
プロジェクトの入口ファイルに先ほど作成したコンポーネントを導入し、Vue.use（導入したコンポーネント）を通してプラグインを使用する必要があります。
これで、グローバルVueコンポーネントが完成します。私たちはinstall方法を提供しながらも、Vue.$emit()の方法でコンポーネントの中の方法をトリガすることができるが、最近はElement UIを使用して、そのコンポーネントの中の方法がVue.$refs()を通じてトリガされることがわかった。具体的な原因は後日に残して検討する。
vue$refsの基本的な使い方

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

<script>
new Vue({
  el: "#app",
  methods:{
  add:function(){
    this.$refs.input1.value ="22"; //this.$refs.input1     dom     
    }
  }
})
</script>

一般に、DOM要素を取得するには、document.querySelector（「.input 1」）がこのdomノードを取得し、input 1の値を取得する必要がある。
しかし、refでバインディングした後、domノードを取得する必要はありません。直接上のinputにinput 1をバインドして、その後$refsで呼び出してもいいです。
その後、javascriptの中でこう呼びます。this.refs.input 1は、domノードの取得の消費を減らすことができます。
締め括りをつける
以上はこの文章の全部の内容です。本文の内容は皆さんの学習や仕事に対して一定の参考となる学習価値を持っています。質問があれば、メッセージを書いて交流してください。ありがとうございます。