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

HTML 页面不支持直接使用 Vue 组件，但可以通过使用 Vue.js 和 Vue 组件库将 Vue 组件嵌入到 HTML 页面中。具体的步骤如下：

1. 引入 Vue.js 和 Vue 组件库。

2. 在 HTML 页面中定义一个容器元素，用于渲染 Vue 组件。

3. 在 Vue 组件中定义需要传递的 props 属性。

4. 在 Vue 组件中使用 props 属性获取父组件传递的数据。

5. 创建一个 Vue 实例，并将其挂载到容器元素上。

6. 在创建 Vue 实例时通过 propsData 选项将数据传递给 Vue 组件。

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

<!-- 引入 Vue.js 和 Vue 组件库 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

<!-- 定义容器元素 -->
<div id="app"></div>

<!-- 定义 Vue 组件 -->
<template id="my-component">
  <div>
    <p>子组件展示数据：{{ data }}</p>
  </div>
</template>

<script>
Vue.component('my-component', {
  template: '#my-component',
  props: {
    data: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      // 使用 props 属性获取父组件传递的数据
      data: this.$props.data
    }
  }
});

// 创建 Vue 实例并挂载到容器元素上
new Vue({
  el: '#app',
  template: '<my-component :data="data" />',
  data() {
    return {
      data: '这是父组件传递过来的数据'
    }
  }
});
</script>

在上面的代码中，我们在 HTML 页面中定义了一个容器元素 `#app`，并在其中创建了一个 Vue 实例。通过在创建 Vue 实例时将数据传递给 Vue 组件，实现了在子组件中展示数据的功能。在子组件中，使用 `this.$props` 访问父组件传递过来的数据。注意，在 Vue 3 中，`this.$props` 改为了 `this.$attrs`。