コンポーネントの登録


このページは、コンポーネントの基本を読んでいることを前提としています。コンポーネントについてまだよく知らない場合は、最初に読むことをお勧めします。


#ディレクトリ


コンポーネントを登録するときは、必ず名前を付ける必要があります。たとえば、グローバル登録中に次のことがわかりました。 

Vue.component('my-component-name', { /* ... */ })
コンポーネント名は Vue.component の最初のパラメータです。

コンポーネントに付ける名前は、コンポーネントで何を行うかによって異なります。 (文字列テンプレートや
単一ファイル コンポーネント

ではなく) DOM 内でコンポーネントを直接使用する場合は、カスタム コンポーネント名について

W3C 仕様

に従うことを強くお勧めします (すべての文字は小文字で、ハイフンを含める必要があります)。これは、現在および将来の HTML 要素との競合を回避するのに役立ちます。 コンポーネント名に関するその他の提案は、

スタイル ガイド

で見つけることができます。

#コンポーネント名のケース

コンポーネント名を定義するには 2 つの方法があります:

kebab-case の使用

Vue.component('my-component-name', { /* ... */ })
kebab-case (ダッシュ区切りの名前) を使用してコンポーネントを定義する場合、カスタム要素を参照するときにも kebab-case を使用する必要があります (例: ##) #<コンポーネント名>。

PascalCase の使用

Vue.component('MyComponentName', { /* ... */ })
PascalCase を使用してコンポーネント (最初の文字が大文字で名前が付けられます) を定義する場合、カスタム要素を参照するときにどちらの命名法も使用できます。つまり、

<my-component-name>

と <MyComponentName> は両方とも許容されます。ただし、DOM (つまり、非文字列テンプレート) で直接使用する場合は、kebab-case のみが有効であることに注意してください。

グローバル登録

これまで、コンポーネントの作成には Vue.component のみを使用してきました。 

Vue.component('my-component-name', {
  // ... 选项 ...
})

これらのコンポーネントは グローバルに登録されています。つまり、登録後に新しく作成された Vue ルート インスタンス (new Vue) のテンプレートで使用できます。例: 

Vue.component('component-a', { /* ... */ })
Vue.component('component-b', { /* ... */ })
Vue.component('component-c', { /* ... */ })

new Vue({ el: '#app' })
<div id="app">
  <component-a></component-a>
  <component-b></component-b>
  <component-c></component-c>
</div>

すべてのサブコンポーネントにも同じことが当てはまります。つまり、これら 3 つのコンポーネントは内部的に相互に使用することもできます。


#ローカル登録

グローバル登録は、多くの場合理想的ではありません。たとえば、webpack のようなビルド システムを使用する場合、すべてのコンポーネントをグローバルに登録すると、コンポーネントを使用しなくなった場合でも、そのコンポーネントは最終的なビルド結果に含まれることになります。その結果、ユーザーがダウンロードする JavaScript の量が不必要に増加します。

このような場合、プレーン JavaScript オブジェクトを使用してコンポーネントを定義できます: 

var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }

次に、使用するコンポーネントを

components オプションで定義します: 

new Vue({
  el: '#app',
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

components オブジェクトの各属性について、その属性名はカスタム要素の名前であり、その属性値はこのコンポーネントのオプション オブジェクトです。

注:

部分的に登録されたコンポーネントは、その子コンポーネントでは使用できません。たとえば、ComponentA を ComponentB で使用できるようにするには、次のように記述する必要があります: 

var ComponentA = { /* ... */ }

var ComponentB = {
  components: {
    'component-a': ComponentA
  },
  // ...
}
または、Babel と webpack 経由で ES2015 モジュールを使用している場合は、次のようにします。コードは次のようになります。 

import ComponentA from './ComponentA.vue'

export default {
  components: {
    ComponentA
  },
  // ...
}

ES2015 では、オブジェクトに

ComponentA

のような変数名を入れることは、実際には ComponentA: ComponentA の省略形であることに注意してください。これは変数名です。 また:

    テンプレートで使用されるカスタム要素の名前

    • オプションを含む変数名このコンポーネント


#モジュール システム

#失敗した場合import

/
require

モジュール システムを使用します。現時点ではこの章をスキップしてください。ご利用いただく場合には、特別な説明や注意事項をご案内させていただきます。

#モジュール システムへのローカル登録

まだ読んでいる方は、次のことを意味します。 Babel や webpack などのモジュール システムを使用しました。このような場合は、components ディレクトリを作成し、各コンポーネントを独自のファイルに配置することをお勧めします。

次に、使用する各コンポーネントをローカルに登録する前にインポートする必要があります。たとえば、仮想の

ComponentB.js または ComponentB.vue

ファイルでは: 

import ComponentA from './ComponentA'
import ComponentC from './ComponentC'

export default {
  components: {
    ComponentA,
    ComponentC
  },
  // ...
}
Now ComponentA and ComponentC

ComponentB のテンプレートで使用できます。

基本コンポーネントの自動グローバル登録

コンポーネントの多くは、比較的一般的な入力ボックスやボタンなどの要素をラップしているだけかもしれません。これらは 基本コンポーネント と呼ばれることもあり、さまざまなコンポーネントで頻繁に使用されます。

非常に多くのコンポーネントには、基本コンポーネントを含む長いリストがあります: 

import BaseButton from './BaseButton.vue'
import BaseIcon from './BaseIcon.vue'
import BaseInput from './BaseInput.vue'

export default {
  components: {
    BaseButton,
    BaseIcon,
    BaseInput
  }
}

ただし、これはテンプレートのごく一部にのみ使用されます: 

<BaseInput
  v-model="searchText"
  @keydown.enter="search"
/>
<BaseButton @click="search">
  <BaseIcon name="search"/>
</BaseButton>

幸いなことに、 webpack (または内部で webpack を使用する Vue CLI 3 ) を使用する場合は、require.context を使用して、これらの非常に一般的な基本コンポーネントのみをグローバルに登録できます。以下は、アプリケーション エントリ ファイル (src/main.js など) の基本コンポーネントをグローバルにインポートできるようにするサンプル コードです。 

import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'

const requireComponent = require.context(
  // 其组件目录的相对路径
  './components',
  // 是否查询其子目录
  false,
  // 匹配基础组件文件名的正则表达式
  /Base[A-Z]\w+\.(vue|js)$/
)

requireComponent.keys().forEach(fileName => {
  // 获取组件配置
  const componentConfig = requireComponent(fileName)
  // 获取组件的 PascalCase 命名
  const componentName = upperFirst(
    camelCase(
      // 获取和目录深度无关的文件名
      fileName
        .split('/')
        .pop()
        .replace(/\.\w+$/, '')
    )
  )
  
  // 全局注册组件
  Vue.component(
    componentName,
    // 如果这个组件选项是通过 `export default` 导出的，
    // 那么就会优先使用 `.default`，
    // 否则回退到使用模块的根。
    componentConfig.default || componentConfig
  )
})

覚えておいてくださいグローバル登録の動作ルート Vue インスタンス (新しい Vue 経由) が作成される前に が発生する必要があります。 こちら実際のプロジェクト シナリオの例があります。