根元素上的 Vuejs 自定义属性答案

【问题标题】：Vuejs custom properties on root element根元素上的 Vuejs 自定义属性
【发布时间】：2017-01-22 11:57:50
【问题描述】：

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

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>

有什么想法吗？

【问题讨论】：

props on element 必须写成kebab-case vuejs.org/v2/guide/components.html#camelCase-vs-kebab-case 所以组件属性应该是test-prop="value here"
@BelminBedak 我怎么没注意到我不知道。非常感谢你。你能把这个作为答案而不是评论吗？

标签： vue.js vuejs2 vue-component

【解决方案1】：

HTML属性是区分大小写的，所以当你要发送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>

【讨论】：