将数据传递给 Vue.js 组件答案

【问题标题】：Passing data to Vue.js component将数据传递给 Vue.js 组件
【发布时间】：2023-03-04 08:10:06
【问题描述】：

我正在创建一个组件并希望将两个属性（item 和 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 属性也不会显示。

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

【问题讨论】：

标签： vue.js vue-component

【解决方案1】：

查看 Vue 的关于 prop 命名的文档https://vuejs.org/v2/guide/components.html#camelCase-vs-kebab-case

在这种情况下，使用 v-bind:brokerage-id 和 v-bind:test-id 应该可以解决问题。

【讨论】：