静态页面如何使用vue组件进行传参

静态页面可以通过 Vue 组件进行传参。具体的步骤如下：

1. 创建一个 Vue 组件，定义需要传递的 props 属性。

2. 在静态页面中使用该组件，并将需要传递的数据通过 props 属性传递给组件。

3. 在组件中通过 `this.$props` 访问父组件传递过来的数据。

下面是一个简单的示例代码：

<!-- 父组件 -->
<template>
  <div>
    <my-component :data="data" />
  </div>
</template>

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

export default {
  name: 'ParentComponent',
  components: {
    MyComponent
  },
  data() {
    return {
      data: '这是父组件传递过来的数据'
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>
    <p>子组件展示数据：{{ $props.data }}</p>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  props: {
    data: {
      type: String,
      required: true
    }
  }
}
</script>

在上面的代码中，父组件通过将数据传递给 MyComponent 组件的 data 属性，实现了在子组件中展示数据的功能。在子组件中，使用 `$props` 访问父组件传递过来的数据。注意，在 Vue 3 中，`$props` 改为了 `this.$attrs`。