vue怎么自定义组件并在其他页面引用自定义组件

在Vue.js中自定义组件并将其引用到其他页面非常直观简单，遵循以下步骤：

1. **创建组件**: 首先，打开一个`.vue`文件，这是Vue组件的基本结构。在其中编写HTML、CSS以及可能的`script`部分。例如，创建一个名为`MyCustomComponent.vue`的组件：

<template>
  <div>
    我是一个自定义组件!
    <input v-model="message">
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  methods: {
    sendMessage() {
      console.log('Message:', this.message);
    }
  }
}
</script>

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

这里我们定义了一个包含输入框和按钮的组件，可以显示用户输入的消息。

2. **导出组件**: 使用`export default`关键字导出组件，使得其他地方可以引用。这里的`default`是组件的实例，而`name`属性用于给组件起别名，如`components`选项会用到这个别名。

3. **注册组件**: 在主入口文件（通常是`main.js`或`App.vue`），使用`import`导入自定义组件，然后在`components`选项中注册：

// main.js 或 App.vue 的 script 部分
import MyCustomComponent from '@/components/MyCustomComponent.vue';

Vue.component('my-custom-component', MyCustomComponent);

现在，`my-custom-component`标签可以在其他Vue组件模板里使用了，就像这样：

<template>
  <div>
    <my-custom-component></my-custom-component>
  </div>
</template>

4. **在其他组件中引用**：在其他Vue组件中，可以直接使用`<my-custom-component>`标签，数据和方法通过props传递，如果需要，还可以通过$emit触发自定义事件。