vue中引用组建的步骤

在 Vue 中引用组件的步骤如下：

1. 创建一个 .vue 文件，包含组件的模板、样式和逻辑。
2. 在需要使用该组件的父组件中，通过 import 导入该组件。
3. 在父组件中，通过 components 属性将该组件注册为子组件。
4. 在父组件的模板中，使用该组件的标签进行引用。

例如，如果我们有一个 HelloWorld 组件，它的模板如下：

<template>
  <div>Hello, {{ name }}!</div>
</template>

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

<style>
/* 样式 */
</style>

那么，在父组件中，我们可以这样引用它：

<template>
  <div>
    <hello-world :name="myName" />
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  components: {
    HelloWorld
  },
  data() {
    return {
      myName: 'Vue'
    }
  }
}
</script>

<style>
/* 样式 */
</style>

在这里，我们通过 import 导入了 HelloWorld 组件，然后在 components 属性中将其注册为子组件。在模板中，我们使用了 `<hello-world>` 标签来引用该组件，并通过属性传递了一个名为 `myName` 的值。