Question

在开发我的应用程序时，我有一个包装器（本例简化），它是网站中所有元素的根。但是，我需要在此包装器旁边包含一个包含自定义属性的组件。那时我发现该组件的属性从未被读入。

的index.html

<body>
  <div id="app" >  <!-- Vuejs is bound to this element -->
    <test-item testProp="My Test Prop Outside Wrapper"></test-item>
    <wrapper></wrapper>
  </div>
</body>

TestItem.vue

<template>
  <h1>{{ testProp }}</h1>
</template>

<script>
export default {
  props: {
    testProp: {
      type: String,
      default: "Default String"
    }
  }
}
</script>

Wrapper.vue

<template>
  <div>
    <test-item testProp="My Test Prop Inside Wrapper"></test-item>
  </div>
</template>

<script>
export default {

}
</script>

作为我导入这些组件并初始化Vue实例的参考：

Vue.component('test-item', require('./components/TestItem.vue'));
Vue.component('wrapper', require('./components/Wrapper.vue'));

const app = new Vue({
  el: '#app'
});

我原本预料到，因为我在两个实例上传递 testProp ，输出看起来像

<h1>My Test Prop Outside Wrapper</h1>
<div>
  <h1>My Test Prop Inside Wrapper</h1>
</div>

然而，这不是我所看到的，在包装器外面的那个，属性没有通过并且使用默认属性值

<h1>Default String</h1>
<div>
  <h1>My Test Prop Inside Wrapper</h1>
</div>

任何想法发生了什么？

Answer 1

HTML属性区分大小写，因此当您想要发送道具时，道具的属性应该用烤肉串而不是camelCase写。

https://vuejs.org/v2/guide/components.html#camelCase-vs-kebab-case

在你的情况下，像这样：

<test-item test-prop="My Test Prop Inside Wrapper"></test-item>

Vuejs根元素的自定义属性

1 个答案: