Enregistrement des composants


Cette page suppose que vous avez lu Bases des composants. Si vous ne savez pas encore grand-chose sur les composants, je vous recommande de le lire d'abord.


Répertoire

  • Nom du composant

  • Inscription globale

  • Inscription partielle

  • Système de modules

    Casse du nom des composants


    Il existe deux façons de définir les noms des composants : Utiliser kebab - case

    Vue.component('my-component-name', { /* ... */ })
    Lorsque vous utilisez kebab-case (noms séparés par des tirets) pour définir un composant, vous devez également utiliser kebab-case lors du référencement de l'élément personnalisé, tel que <my-component-name> .

    Utilisation de PascalCaseVue.component 的第一个参数。

    你给予组件的名字可能依赖于你打算拿它来做什么。当直接在 DOM 中使用一个组件 (而不是在字符串模板或单文件组件) 的时候，我们强烈推荐遵循 W3C 规范中的自定义组件名 (字母全小写且必须包含一个连字符)。这会帮助你避免和当前以及未来的 HTML 元素相冲突。

    你可以在风格指南中查阅到关于组件名的其它建议。


    组件名大小写

    定义组件名的方式有两种：

    使用 kebab-case

    Vue.component('MyComponentName', { /* ... */ })

    当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，例如 <my-component-name>。

    使用 PascalCase

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

    当使用 PascalCase (首字母大写命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。也就是说 <my-component-name> 和 <MyComponentName>

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

new Vue({ el: '#app' })

    Lors de la définition d'un composant à l'aide de PascalCase (nommé avec la première lettre en majuscule), vous pouvez utiliser les deux nomenclatures lors du référencement de l'élément personnalisé. En d'autres termes, <my-component-name> et <MyComponentName> sont tous deux acceptables. Notez cependant que seul kebab-case est valide lorsqu'il est utilisé directement dans le DOM (c'est-à-dire des modèles sans chaîne).

    🎜🎜

    Enregistrement global

    Jusqu'à présent, nous n'avons utilisé que Vue.component pour créer des composants : Vue.component 来创建组件：

    <div id="app">
  <component-a></component-a>
  <component-b></component-b>
  <component-c></component-c>
</div>

    这些组件是全局注册的。也就是说它们在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中。比如：

    var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }
    new Vue({
  el: '#app',
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

    在所有子组件中也是如此，也就是说这三个组件在各自内部也都可以相互使用。


    局部注册

    全局注册往往是不够理想的。比如，如果你使用一个像 webpack 这样的构建系统，全局注册所有的组件意味着即便你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。

    在这些情况下，你可以通过一个普通的 JavaScript 对象来定义组件：

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

var ComponentB = {
  components: {
    'component-a': ComponentA
  },
  // ...
}

    然后在 components 选项中定义你想要使用的组件：

    import ComponentA from './ComponentA.vue'

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

    对于 components 对象中的每个属性来说，其属性名就是自定义元素的名字，其属性值就是这个组件的选项对象。

    注意：局部注册的组件在其子组件中不可用。例如，如果你希望 ComponentA 在 ComponentB 中可用，则你需要这样写：

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

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

    或者如果你通过 Babel 和 webpack 使用 ES2015 模块，那么代码看起来更像：

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

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

    注意在 ES2015+ 中，在对象中放一个类似 ComponentA 的变量名其实是 ComponentA: ComponentA 的缩写，即这个变量名同时是：

    • 用在模板中的自定义元素的名称

    • 包含了这个组件选项的变量名


    模块系统

    如果你没有通过 import/require 使用一个模块系统，也许可以暂且跳过这个章节。如果你使用了，那么我们会为你提供一些特殊的使用说明和注意事项。


    在模块系统中局部注册

    如果你还在阅读，说明你使用了诸如 Babel 和 webpack 的模块系统。在这些情况下，我们推荐创建一个 components 目录，并将每个组件放置在其各自的文件中。

    然后你需要在局部注册之前导入每个你想使用的组件。例如，在一个假设的 ComponentB.js 或 ComponentB.vue 文件中：

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

    现在 ComponentA 和 ComponentC 都可以在 ComponentB

    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
  )
})

    Ces composants sont
    enregistrés au niveau mondial

    . C'est-à-dire qu'ils peuvent être utilisés dans le modèle de toute instance racine de Vue nouvellement créée (new Vue) après enregistrement. Par exemple : 🎜rrreeerrreee🎜La même chose est vraie pour tous les sous-composants, ce qui signifie que ces trois composants peuvent également s'utiliser en interne. 🎜🎜🎜🎜

    🎜🎜Inscription partielle🎜🎜🎜🎜🎜L'inscription globale n'est souvent pas idéale. Par exemple, si vous utilisez un système de build tel que webpack, l'enregistrement global de tous les composants signifie que même si vous n'utilisez plus un composant, il sera toujours inclus dans votre résultat de build final. Cela entraîne une augmentation inutile de la quantité de JavaScript téléchargée par les utilisateurs. 🎜🎜Dans ces cas-là, vous pouvez définir le composant via un simple objet JavaScript : 🎜rrreee🎜 Définissez ensuite le composant que vous souhaitez utiliser dans l'option components : 🎜rrreee🎜Pour composants Pour chaque attribut de l'objet, son nom d'attribut est le nom de l'élément personnalisé et sa valeur d'attribut est l'objet d'option de ce composant. 🎜🎜Remarque : 🎜Les composants partiellement enregistrés sont indisponibles dans leurs composants enfants🎜. Par exemple, si vous souhaitez que ComponentA soit disponible dans ComponentB, vous écrivez comme ceci : 🎜rrreee🎜 Ou si vous utilisez les modules ES2015 via Babel et webpack, alors le code sera plus beau Comme : 🎜rrreee🎜 Notez que dans ES2015+, mettre un nom de variable comme ComponentA dans un objet est en fait l'abréviation de ComponentA: ComponentA, c'est-à-dire cette variable name est également : 🎜
    • 🎜Le nom de l'élément personnalisé utilisé dans le modèle🎜
    • 🎜Contient le nom de la variable de ce composant option🎜
    🎜🎜🎜

    🎜🎜Système de modules🎜🎜🎜🎜🎜Si vous n'en utilisez pas via import/< code>require Système de modules, vous pouvez peut-être ignorer ce chapitre pour le moment. Si vous l'utilisez, nous vous fournirons des instructions et précautions particulières. 🎜🎜🎜🎜🎜

    🎜Partiellement enregistré dans le système de modules🎜🎜🎜🎜Si vous lisez encore, vous utilisez quelque chose comme Système de modules de Babel et Webpack. Dans ces cas, nous vous recommandons de créer un répertoire components et de placer chaque composant dans son propre fichier. 🎜🎜Ensuite, vous devez importer chaque composant que vous souhaitez utiliser avant de l'enregistrer localement. Par exemple, dans un fichier hypothétique ComponentB.js ou ComponentB.vue : 🎜rrreee🎜Maintenant ComponentA et ComponentC peut être utilisé dans le modèle de ComponentB. 🎜🎜🎜🎜

    Enregistrement global automatisé des composants de base

    Peut-être que beaucoup de vos composants enveloppent simplement des éléments tels que des zones de saisie ou des boutons, qui sont relativement génériques. Nous les appelons parfois composants de base, et ils sont fréquemment utilisés dans divers composants.

    Tant de composants auront une longue liste de composants de base :

    rrreee

    Et seulement pour une petite partie du modèle :

    rrreee

    Heureusement, si vous utilisez webpack (ou utilisez webpack en interne Vue CLI 3+), alors vous Vous pouvez utiliser l'exemple de code pour importer globalement des composants de base dans require.context 只全局注册这些非常通用的基础组件。这里有一份可以让你在应用入口文件 (比如 src/main.js) :

    rrreee

    Rappelez-vousque le comportement de l'enregistrement global doit se produire avant la création de l'instance racine de Vue (via une nouvelle Vue). Ici il y a un exemple dans un scénario de projet réel.