vue3动态组件传参

在Vue 3中，动态组件传参的方式可以有多种方法。其中一种常见的方式是使用props来传递参数。

首先，在父组件中创建一个包含需要传递参数的对象，比如params对象，将需要传递的参数以键值对的形式封装到params对象中。然后，通过v-bind指令将整个params对象传递给子组件。父组件的示例代码如下所示：

const app = Vue.createApp({
  data() {
    return {
      params: {
        num1: 123,
        num2: 456,
        num3: 789
      }
    }
  },
  template: `
    <div>
      <test :params="params" />
    </div>
  `
});

app.component("test", {
  props: ['params'],
  template: `
    <div>{{params.num1}}</div>
    <div>{{params.num2}}</div>
    <div>{{params.num3}}</div>
  `
});

在子组件中，通过props来接收父组件传递的参数。子组件的示例代码如下所示：

<template>
  <div>
    <a-button @click="clickHandle">组件传参</a-button>
  </div>
</template>

<script>
export default {
  name: 'test',
  emits: ['changeMsg'],
  setup (props, { emit }) {
    function clickHandle () {
      emit('changeMsg', '我是子组件值')
    }
    return { clickHandle }
  }
};
</script>

在这个例子中，将num1、num2、num3封装到了params对象中，然后使用v-bind="params"将整个对象传给组件。组件接收的方式与之前的方式相同，通过props来接收父组件传递的参数。这种方式更加优雅和简洁。