javascript 使用连字符属性命名的目的是什么?它是如何工作的?

bxgwgixi  于 2022-12-17  发布在  Java
关注(0)|答案(1)|浏览(108)

我正在创建一个组件(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-classVideoComponent不会接收到它,并且为空,但是videoSource工作正常...为什么它对某些属性工作而对其他属性不工作?
在使用组件时对属性和特性使用相同的命名。

uurv41yg

uurv41yg1#

VideoSource是一个对象,因此它将作为一个对象直接传递给您的src属性。
至于 prop ,有个约定:https://vuejs.org/style-guide/rules-strongly-recommended.html#prop-name-casing
当将prop传递给组件时,遵循css-class(kebab-case);当在子组件中接收prop时,遵循cssClass(camelCase)。
编辑:它当然应该是:css-class,又名v-bind:class-css,否则它不会作为React对象传递,而是作为常规字符串传递。
Vue devtools可以在这里帮助你。

相关问题