根元素上的 Vuejs 自定义属性

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属性是case-sensitive所以当你想发送prop时，prop的属性应该写成kebab-case而不是camelCase。

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

在你的情况下，是这样的：

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

根元素上的 Vuejs 自定义属性

Vuejs custom properties on root element

vue.js

vue-component

vuejs2