Vue.js 中如何用 Props 初始化组件数据？

vue.js

2024-03-03 16:37:55

在 Vue.js 中将 Props 作为初始数据

问题：用 Props 初始化组件数据

在 Vue.js 中，props 是只读属性，用于初始化组件并向组件传递数据。但是，有时您可能希望将 props 传递给组件，以便在将来从组件内部更改它们，例如通过 AJAX 请求。

解决方案：使用 v-bind 和 created 生命周期钩子

要将 props 作为初始数据传递给 Vue 组件，可以使用以下步骤：

在父组件中定义 props：
使用 props 选项定义要传递给子组件的 props。
在子组件中接收 props：
使用 props 选项接收父组件传递的 props。
在子组件中初始化数据：
在 created() 生命周期钩子中，将 props 赋值给组件的 data 对象。
在父组件中传递 props：
使用 v-bind 指令将 props 传递给子组件。

代码示例

父组件（cars-list.vue）：

<template>
  <div>
    <template v-for="car in cars">
      <single-car :initial-properties="car"></single-car>
    </template>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      cars: [
        {
          color: 'red',
          maxSpeed: 200,
        },
        {
          color: 'blue',
          maxSpeed: 195,
        },
      ]
    }
  },
  props: ['initialProperties'],
}
</script>

子组件（single-car.vue）：

<template>
  <div>
    <p>颜色：{{ properties.color }}</p>
    <p>最高速度：{{ properties.maxSpeed }}</p>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      properties: {},
    }
  },
  props: ['initialProperties'],
  created: function () {
    this.properties = this.initialProperties
  },
}
</script>