Question

我正在创建一个组件，并希望将两个属性（item＆amp; brokerageID）传递给组件。这是HTML代码：

{{brokerageID}}
<holiday-component  v-bind:item="item" v-bind:brokerageID="brokerageID" testID="45"  ></holiday-component>

以下是'holiday-component'的代码

Vue.component('holiday-component', {
props: ['item',
      'brokerageID',
      'testID',
    ],


data () {
  return {
   holidaysData: [],
    showHolidays: false,
 }
},      

methods: {
    getHolidays(contactID) {

   ....
 },

template: <div> {{testID}} {{item.contactName}} {{brokerageID}}
....

'item'属性被传递给组件（item.contactName在组件模板中正确显示。但是，不知何故，brokerageID（Vue对象的属性）没有被传递。这个属性存在，被确认为在HTML中的组件上方使用的{{brokerageID}}显示值。但是，在组件模板中，brokerageID不可用。此外，不会显示传递给组件的testID属性。

有人可以告诉我，我的实现中有什么问题我无法在我的组件中使用brokerrageID？

Answer 1

请参阅Vue关于道具命名的文档https://vuejs.org/v2/guide/components.html#camelCase-vs-kebab-case

在这个例子中，使用v-bind：brokerage-id和v-bind：test-id应该可以解决问题。

将数据传递给Vue.js组件

1 个答案: