首页 文章

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

提问于
浏览 次
0

我正在努力做到这一点 . 这似乎微不足道，但是没有用 .

在我的父组件中，我正在实例化子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，但是当我检查上面的输入时，它告诉我占位符为null .

我错过了什么？

vue.js vue-component

1 回答

  • 0

    在模板中，您必须使用基于烤肉串的属性 . 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>
    回复于

相关问题