静态页面如何在vue.component 里面传参使用prop

静态页面在 Vue 组件内传参同样需要使用 props 属性。在父组件中使用静态页面的时候，可以通过设置 props 将数据传递给静态页面。具体的步骤如下：

1. 在父组件中设置 props 属性，将需要传递的数据传递给静态页面。

2. 在静态页面中通过 `this.$props` 访问父组件传递过来的数据。

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

<!-- 父组件 -->
<template>
  <div>
    <static-page :data="data" />
  </div>
</template>

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

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

<!-- 静态页面 -->
<template>
  <div>
    <p>静态页面展示数据：{{ $props.data }}</p>
  </div>
</template>

<script>
export default {
  name: 'StaticPage'
}
</script>

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