グローバル (パブリック) コンポーネントをカプセル化する方法 (必須)

 

グローバル (パブリック) コンポーネントをカプセル化したい場合は、まず次の 3 つの点を知る必要があります?
        1 つ目は、なぜグローバル コンポーネントとして定義する必要があるのか​​ということです。

                   プロジェクト内で何度も使用するため

        2: コンポーネントに対応する .vue ファイルを配置する場所

                  コンポーネント

        3: パブリック (グローバル) コンポーネントを定義するにはどうすればよいですか? 

                   1.Vue.component('コンポーネント名', コンポーネントオブジェクト) 

                   2.Vue.use()

梱包方法は？

 ステップ 1: グローバル コンポーネントにカプセル化するファイルを作成する

 

 ステップ 2: コンポーネント構造 (スロット?) を構築する

コンポーネントのコンテンツが左右のみであると仮定すると、コンポーネントの左側と右側のコンテンツは、異なるユーザーに応じて異なるコンテンツを表示する可能性がありますが、これはハードコーディングできません。名前付きスロットを通じてコン​​テンツのカスタマイズと最適化を行うことができます。 、次のようにコード化します。

<template>
  <el-card>
    <div class="page-tools">
      <!-- 左侧 -->
      <div class="left">
        <div class="tips">
          <i class="el-icon-info" />
          <span>
            <slot name="left">
              <span>文字区域</span>
            </slot>
          </span>
        </div>
      </div>
      <div class="right">
        <!-- 右侧 -->
        <slot name="left">
          按钮区域
        </slot>
      </div>
    </div>
  </el-card>
</template>

 ステップ 3: コンポーネントを登録する

当社のビジネス コンポーネントは通常、ローカル コンポーネントとして定義され、使用時にコンポーネントに登録する必要があります。また、グローバル汎用コンポーネントは通常、グローバル コンポーネントとして定義する必要があり、ローカル登録は必要ありません。

         1. 通常の記述: Vue.component() を使用してグローバルコンポーネントを登録します

// 在入口文件 (main.js)中引入注册 ,为什么要在入口文件中引入注册,
// 因为我们注册的时候用到了vue,刚好入口文件中已经引入了
// 所以为了方便就在入口文件中引入注册
 
import 组件对象 from 'xxxxx.vue'
Vue.component('组件名', 组件对象)
 
 
import PageTools from '@/components/PageTools/index.vue'
Vue.component('PageTools', PageTools)

         2. 最適化された書き込み: Vue.use() を使用してグローバル コンポーネントを登録します

import PageTools from '@/components/PageTools/index.vue'
const MyPlugin = {
	install(Vue) {
    console.log('install.....', obj)
    Vue.component('PageTools', PageTools)
  }
}
Vue.use(MyPlugin)

ステップ 4: 使用する

グローバル登録を実現した後は、ビジネスコンポーネントに導入して登録する必要はなく、直接使用するだけです

<PageTools>
        <template #left>
          <span>总记录数:20条</span>
        </template>
        <template #right>
          <el-button type="warning" size="small">导入excel</el-button>
          <el-button type="danger" size="small">导出excel</el-button>
          <el-button type="primary" size="small">新增员工</el-button>
        </template>
</PageTools>