连字符属性命名的目的是什么以及它是如何工作的？

Question

我正在创建一个组件（vue 2.6），刚刚意识到如果属性

class

没有连字符，实际上不会将字符串传递给组件。其他没有连字符名称的属性确实提供了它们的值。这就是我的代码的样子：

成分：

<template>
  <video
    controls
    :class="cssClass"
  >
    <source :src="videoSource" type="video/mp4"/>
  </video>
</template>

<script>
export default {
  name: 'VideoComponent',
  props: {
    videoSource: { type: String, default: '' },
    cssClass: { type: String, default: '' },
  },
};
</script>

我如何使用它：

<VideoComponent
  v-if="selectedAsset.type == 'video'"
  css-class="cssClassName"
  :videoSource="selectedAsset.videoSource"
/>

因此，如果我在父组件中使用该属性时将其命名为

cssClass

而不是

css-class

，则

VideoComponent

不会收到它并且为空，但是

videoSource

工作正常... 为什么它适用于某些属性而其他属性则不然？

当我使用组件时，对属性和属性使用相同的命名。

Answer 1

VideoSource

是一个对象，因此它将作为对象直接传递到您的

src

属性。

对于 props，有一个约定：https://vuejs.org/style-guide/rules-strongly-recommished.html#prop-name-casing

遵循它：将 prop 传递给组件时使用

css-class

（kebab-case），在子组件中接收它时使用

cssClass

（camelCase）。

编辑：它当然应该是

:css-class

又名

v-bind:class-css

，否则它不会作为反应对象传递，而是作为常规字符串传递。

Vue 开发工具可以为您提供帮助。