vue中父组件向子组件传参

在Vue中，父组件向子组件传递参数有几种方式：

1. 使用props属性：在父组件中，在子组件的标签上通过属性绑定的方式传递数据。在子组件中，通过props属性接收传递过来的参数。

父组件：

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

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

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

子组件：

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  props: ['message']
}
</script>

2. 使用.sync修饰符：当需要在子组件中修改父组件的数据时，可以使用.sync修饰符。

父组件：

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

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

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

子组件：

<template>
  <div>
    <input v-model="message">
  </div>
</template>

<script>
export default {
  props: ['message']
}
</script>

以上是两种常用的父组件向子组件传递参数的方式。通过props属性可以将父组件的数据传递给子组件，而使用.sync修饰符可以实现双向数据绑定。