Question

我正在尝试这样做。这似乎微不足道，但是没有用。

在我的父组件中，我正在实例化子EndpointDetailsForm组件，并将settingsDetails prop传递给它，如下所示：

<EndpointDetailsForm :endpointDetails="modalDetails.content" />

在EndpointDetailsForm组件中，我正在检索endpointDetails对象，如下所示：

    props: {
        endpointDetails: {
            type: Object
        }
    }

并尝试将其各种属性用作属性，如下所示：

<b-form-input id="nameInput"
              type="text"
              v-model="form.name"
              :placeholder="endpointDetails.name">
</b-form-input>

当我检查EndpointDetailsForm组件时，它会将endpointDetails显示为prop，但是当我检查上面的输入时，它会告诉我占位符为空。

我错过了什么？

Answer 1

在模板中，您必须使用基于烤肉串的属性。 Vue will convert them以camelCased道具：

HTML属性名称不区分大小写，因此浏览器会将任何大写字符解释为小写。这意味着当你使用in-DOM模板时，camelCased prop名称需要使用他们的kebab-cased（连字符分隔）等价物。

因此，如果您的道具名为endpointDetails，则应将其称为endpoint-details属性。因此：

<EndpointDetailsForm :endpoint-details="modalDetails.content" />

代码示例：

Vue.component('b-form-input', {
  template: '#b-form-input',
  props: {
    placeholder: String,
  },
});

Vue.component('endpointetailsform', {
  template: '#EndpointDetailsForm',
  props: {
    // Vue converts kebab-case to camelCase.
    endpointDetails: {
      type: Object
    },
  },
});

new Vue({
  el: '#app',
  data: {
    content: {
      name: 'my placeholder',
    },
  },
});

<script src="https://unpkg.com/vue@2"></script>

<div id="app">
  <!-- Use kebab-cased attributes -->
  <endpointetailsform :endpoint-details="content" />
</div>

<template id="EndpointDetailsForm">
  <b-form-input :placeholder="endpointDetails.name"></b-form-input>
</template>

<template id="b-form-input">
  <input :placeholder="placeholder" />
</template>

Vue.js：将对象作为prop传递，然后将其属性用作子组件中的属性

1 个答案: