vue动态组件如何传参数

在Vue中，你可以通过使用动态组件和props属性来传递参数。动态组件允许你在运行时根据条件来渲染不同的组件，并且你可以通过props属性将数据传递给这些组件。

首先，在父组件中，你需要定义一个变量来存储要渲染的动态组件的名称。然后，你可以使用`<component>`标签来渲染这个动态组件，并通过v-bind指令将参数传递给它。

以下是一个示例：

<template>
  <div>
    <button @click="toggleComponent">Toggle Component</button>
    <component :is="dynamicComponent" :prop1="data1" :prop2="data2"></component>
  </div>
</template>

<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

export default {
  data() {
    return {
      dynamicComponent: '',
      data1: 'Value 1',
      data2: 'Value 2'
    };
  },
  methods: {
    toggleComponent() {
      // 根据条件来切换动态组件
      this.dynamicComponent = this.dynamicComponent === 'ComponentA' ? 'ComponentB' : 'ComponentA';
    }
  },
  components: {
    ComponentA,