vue父子组件传参的方式

Vue.js 中，父子组件之间的数据传递主要有三种常见方式：

1. **props（属性）**：这是最直接、推荐的方式。父组件通过`props`将数据传递给子组件。父组件在模板上使用`v-bind`绑定属性，并设置相应的名称，子组件则通过`props`接收这些值。这是一种单向的数据流。

<template>
  <child-component :parent-prop="someValue"></child-component>
</template>

<script>
export default {
  data() {
    return { someValue: 'Hello from parent' };
  },
};
</script>

2. **$emit（事件）**：当子组件需要通知父组件更新其状态时，可以触发自定义事件，然后在父组件的`methods`里监听这个事件并处理数据变化。

<template>
  <button @click="$emit('update:someValue', newValue)">Update</button>
</template>

<script>
export default {
  props: ['someValue'],
  methods: {
    updateSomeValue(newValue) {
      this.someValue = newValue;
    },
  },
};
</script>

3. **Vuex（状态管理库）**：当数据需要在整个应用中共享或复杂的状态管理时，可以使用 Vuex，父子组件可以通过actions和mutations来操作全局状态。