vue apiで呼び出せるコンポーネントをカプセル化

まずvueコンポーネントを実装

export default {
  name: 'hello',
  data () {
    return {
      text: ''
    }
  }
}

パッケージapi

jsファイルを新規作成します.

Vueとhelloを導入する.vueは、extendメソッドを使用してvueのサブクラスHelloConstructorを作成します.

Helloメソッドを作成し、exportを出ます.この方法を実装して、helloコンポーネントを呼び出すことができます.Helloメソッドの実装:

まず、HelloConstructorをインスタンス化Vueのようにインスタンス化する.

は次に、マウント関数$mount()メソッドを呼び出してvmを取得し、vmの$el属性によってDOM構造を取得する.

は次に、取得したDOM構造をbodyにマウントする.

// hello.js
import Vue from 'vue';
import HelloTemplate from './hello.vue';

//   extend    vue   
const HelloConstructor = Vue.extend(HelloTemplate);

//         hello  
function Hello(options) {
  options = options || {};
  if (typeof options === 'string') {
    options = {
      text: options
    }
  }
  
  //       ，     DOM      body 
  const helloInstence = new HelloConstructor({data: options});
  helloInstence.vm = helloInstence.$mount();
  document.body.appendChild(helloInstence.vm.$el);
}
export default Hello;

使用
他のjsまたはvueファイルでは、importはhelloを導入する.jsは、私たちが書いたコンポーネントをメソッドで呼び出すことができます.

// js     vue   script   
import Hello from './hello.js';

Hello('hello world');
//   
Hello({
  text: 'hello world'
});

以下のようにHelloメソッドをVueのprototypeにマウントすることもできます.

import Vue from 'vue';
import Hello from './hello.js';
Vue.prototype.$hello = Hello;

vueコンポーネントではthis.$hello('hello world')として使用できます.
以上はapi呼び出しコンポーネントをカプセル化する基本的な考え方である.ビジネスニーズは、別途適切な場所で実現する必要があります.
コンポーネントを適切な場合に適切な場所で呼び出す$destroy()メソッドは、コンポーネントを破棄することに注意してください.Vue.use()でコンポーネントを使用したい場合は、このブログを参照してください.