HBuilderX vue2自定义组件

在HBuilderX中，我们可以通过以下步骤来创建vue2自定义组件：

1.在项目中创建一个新的.vue文件，例如MyComponent.vue。

2.在MyComponent.vue文件中，编写组件的模板、脚本和样式。

3.在脚本中，使用Vue.component()方法来注册组件并导出组件。

例如，下面是一个简单的MyComponent.vue文件的示例：

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  props: {
    title: String,
    content: String
  }
}
</script>

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

在上面的示例中，我们定义了一个名为MyComponent的组件，它有两个属性：title和content。我们可以在父组件中使用这个组件，并传递这两个属性的值。

例如，下面是一个使用MyComponent组件的示例：

<template>
  <div>
    <my-component title="Hello" content="World"></my-component>
  </div>
</template>

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

export default {
  name: 'App',
  components: {
    MyComponent
  }
}
</script>

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

在上面的示例中，我们在父组件中导入了MyComponent组件，并将其注册为局部组件。然后，我们在模板中使用了MyComponent组件，并传递了title和content属性的值。