I am attempting to learn vue.js and have come across a puzzle. In vuejs.org there is an example for SVG graphics which includes this file :

import AxisLabel from './AxisLabel.js'
import { computed } from 'vue'
import { valueToPoint } from './util.js'

export default {
  components: {
    AxisLabel
  },
  props: {
    stats: Array
  },
  setup(props) {
    const points = computed(() => {
      const total = props.stats.length
      return props.stats
        .map((stat, i) => {
          const { x, y } = valueToPoint(stat.value, i, total)
          return `${x},${y}`
        })
        .join(' ')
    })

    return {
      points
    }
  },
  template: `
  <g>
    <polygon :points="points"></polygon>
    <circle cx="100" cy="100" r="80"></circle>
    <axis-label
      v-for="(stat, index) in stats"
      :stat="stat"
      :index="index"
      :total="stats.length"
    >
    </axis-label>
  </g>
  `
}

I am confused by the relationship between the imported 'AxisLabel' and the 'axis-label' identifier in the template. The syntax of lowercase hyphenation clearly works (missing out the hyphen doesn't work!), and I have successfully added a different (but similar) import to my copy of the project.

But where is this structure documented? Where can I learn more about it?

CodePudding user response：

When you register a component you can use it in the template with either the pascal case (MyComponent) or the kebab case (my-component) versions. Vue will automatically handle this for you.

So in the example of AxisLabel, you can use it as: AxisLabel or axis-label.

This is documented here:

CodePudding user response：

You may give a give to Vue's style guide, there is a LOT to learn from this resource (prop casing, component naming convention, v-if and v-for etc...).

The part related to your specific question is here: https://vuejs.org/style-guide/rules-strongly-recommended.html#component-name-casing-in-templates

TLDR: Vue usually uses the kebab-case form for it's documentation. But PascalCase is totally fine, it's just a preference.
The convention of the framework is to transform an imported MyComponent from an import as a my-component in the template by default. It's used quite a lot in the whole ecosystem because of the style guide.