vue2：是否可以将多个道具传递给组件？

Question

我没有在线找到任何文档或示例，但是将多个道具传递给组件的正确方法是哪种？

这是我尝试过的：

在HTML中

<component:prop1="data1" :prop2="data2"></component>

在component.js中

props: ['prop1','prop2'],

但很奇怪地不起作用...

Answer 1

尽管这有点旧，但我想做出贡献。如果你想“一次”传递一堆属性，你可以使用“v-bind”

假设您的组件有一堆道具：

props: ['age', 'year', 'date']

取而代之的是下面的常规方式：

<MyAwesomeComponent :age="age" :year='year' :date='today' />

也可以这样做：

<MyAwesomeComponent v-bind="groupedProps" />

被“groupedProps”以下对象：

groupedProps: {age:134, year:2153, today: new Date()}

... v-bind="groupedProps" ...

该行为在此处的 vue 文档中进行了描述

Answer 2

您可以将多个道具传递给这样的组件。在父组件中：

<template>
  <div id="app">
    <child-component :propA=propa :propB=propb></child-component2>
  </div>
</template>

<script>
import ChildComponent from './components/comp2'
export default {
  name: 'app',
  components: {
    ChildComponent
  },
  data () {
    return {
      propa : 65,
      propb : 'Nitin'
    }
  }
}
</script>

<style></style>

在子组件中：

<template>
  <div>
    {{propA}}
    {{propB}}
  </div>
</template>

<script>
export default {
  props: {
    propA: Number,
    propB: String
  }

}
</script>

<style lang="css">
</style>

参考：
Vue道具验证

编辑：
更多信息和示例参考可以在以下位置找到：
将数据传递给子组件的道具