Vue 中的父子组件传参是一个常见的需求，可以通过几种方式来实现，下面是常用的几种方式：

1. 父组件传值给子组件 (通过 props)

父组件通过 props 向子组件传递数据。props 是一种自上而下的单向数据流。

示例：

<!-- 父组件 -->
<template>
  <div>
    <child-component :message="parentMessage"></child-component>
  </div>
</template>

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

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

<!-- 子组件 (ChildComponent.vue) -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

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

• 父组件通过 :message="parentMessage" 将 parentMessage 传递给子组件。

• 子组件通过 props 接收 message 并展示。

2. 子组件传值给父组件 (通过 events)

子组件通过 $emit 触发自定义事件，将数据传递给父组件。

示例：

<!-- 父组件 -->
<template>
  <div>
    <child-component @sendMessage="receiveMessage"></child-component>
    <p>{{ receivedMessage }}</p>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      receivedMessage: ''
    };
  },
  methods: {
    receiveMessage(message) {
      this.receivedMessage = message;
    }
  }
}
</script>

<!-- 子组件 (ChildComponent.vue) -->
<template>
  <div>
    <button @click="sendMessage">Send message to parent</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('sendMessage', 'Hello from child!');
    }
  }
}
</script>

• 子组件通过 this.$emit('sendMessage', data) 触发事件，并将数据传递给父组件。

• 父组件通过 @sendMessage="receiveMessage" 监听子组件的事件，并在 receiveMessage 方法中接收数据。

3. 使用 Vuex 管理全局状态

如果父子组件之间的传参需求较复杂，或者跨多个组件传递数据，使用 Vuex 进行状态管理是一个好选择。Vuex 是 Vue 的官方状态管理库，可以在应用中创建一个全局的 store 来管理状态。

示例：

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    message: 'Hello from store'
  },
  mutations: {
    setMessage(state, newMessage) {
      state.message = newMessage;
    }
  },
  actions: {
    updateMessage({ commit }, newMessage) {
      commit('setMessage', newMessage);
    }
  }
});

<!-- 父组件 -->
<template>
  <div>
    <child-component></child-component>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState(['message'])
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>
    <button @click="updateMessage">Update message in store</button>
  </div>
</template>

<script>
export default {
  methods: {
    updateMessage() {
      this.$store.dispatch('updateMessage', 'New message from child');
    }
  }
}
</script>

• 在这个例子中，父子组件都通过 Vuex 中的 state 和 mutations 进行数据交互。

• 子组件通过 this.$store.dispatch 来触发 Vuex 的 action，更新全局状态。

• 父组件通过 mapState 获取 Vuex 中的状态，展示数据。

4. 使用 provide / inject 进行跨级传值

provide 和 inject 允许祖先组件向后代组件提供数据，适用于需要跨越多层级的组件传值。

示例：

<!-- 祖先组件 -->
<template>
  <div>
    <parent-component></parent-component>
  </div>
</template>

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

export default {
  components: {
    ParentComponent
  },
  provide() {
    return {
      message: 'Hello from ancestor'
    };
  }
}
</script>

<!-- 父组件 -->
<template>
  <div>
    <child-component></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

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

• 祖先组件通过 provide 提供数据，子组件通过 inject 注入数据。

• provide 和 inject 是基于依赖注入的方式，通常用于跨越多个层级的组件之间共享数据。