Vue动态组件component如何传值

Vue动态组件component可以通过props属性来传递数据。具体步骤如下：

1.在父组件中定义一个变量，该变量可以是一个对象或一个数组等数据类型。

2.将父组件中定义的变量通过props属性传递到子组件中，子组件需要在props属性中声明接收的数据类型和名称。

3.在子组件中使用props接收父组件传递过来的数据。

4.在父组件中修改变量的值，由于Vue是响应式的，所以子组件中接收到的数据会自动更新。

下面是一个示例代码：

父组件：

<template>
  <div>
    <button @click="toggleComponent">切换组件</button>
    <component :is="currentComponent" :list="list"></component>
  </div>
</template>

<script>
import FirstComponent from "./FirstComponent.vue";
import SecondComponent from "./SecondComponent.vue";

export default {
  components: {
    FirstComponent,
    SecondComponent,
  },
  data() {
    return {
      currentComponent: "FirstComponent",
      list: [],
    };
  },
  methods: {
    toggleComponent() {
      this.currentComponent =
        this.currentComponent === "FirstComponent"
          ? "SecondComponent"
          : "FirstComponent";
      this.list.push("新的数据");
    },
  },
};
</script>

子组件：

<template>
  <div>
    <h3>{{ title }}</h3>
    <ul>
      <li v-for="item in list" :key="item">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      title: "我是子组件",
    };
  },
};
</script>

在上面的示例代码中，父组件中通过props属性将list数组传递到子组件中，在子组件中使用v-for指令遍历list数组渲染数据，并且可以发现在父组件中通过toggleComponent方法修改list数组的值，子组件中渲染的数据也会自动更新。