vu e父子组件传值

在 Vue 中，父组件向子组件传递数据可以通过 props 属性来实现。具体步骤如下：

1. 在父组件中定义要传递给子组件的数据，并通过 props 属性将其传递给子组件，例如：

<template>
  <div>
    <child-component :msg="message"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: 'Hello World'
    }
  }
}
</script>

2. 在子组件中通过 props 属性接收父组件传递过来的数据，并在组件中使用它，例如：

<template>
  <div>
    <p>{{ msg }}</p>
  </div>
</template>

<script>
export default {
  props: {
    msg: {
      type: String,
      required: true
    }
  }
}
</script>

这样就完成了父组件向子组件传值的过程。需要注意的是，父组件传递给子组件的数据应该是绑定在子组件标签上的，且子组件中 props 属性的值应该与父组件中传递数据的属性名相同。