Vue 中传递参数到子组件的最佳实践

在 Vue 中传递参数可以通过 props 属性来实现。

1. 在父组件中定义 props 属性：

<template>
  <child-component :prop1='value1' :prop2='value2' />
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      value1: 'prop1',
      value2: 'prop2'
    }
  }
}
</script>

2. 在子组件中接收 props 属性：

<template>
  <div>{{ prop1 }} {{ prop2 }}</div>
</template>

<script>
export default {
  props: {
    prop1: String,
    prop2: String
  }
}
</script>

这样就可以在父组件中通过 props 属性向子组件传递参数了。在子组件中通过 props 属性接收参数后就可以在模板中使用了。