vue.js怎么定义一个组件

如何在 Vue.js 中定义组件

一、直接定义

1. 在 <script> 标签中，使用 export default {} 导出组件对象：</script>

   <script>export default {  // 组件内容}</script>

2. 在 标签中，定义组件布局：

   立即学习“前端免费学习笔记（深入）”；

   <template><div>组件内容</div></template>

二、使用组件工厂函数

1. 创建一个工厂函数，并使用 defineComponent 辅助函数：

   import { defineComponent } from 'vue'export default defineComponent({  // 组件内容})
2. 组件布局与上述直接定义方式相同。

三、使用类定义组件

1. 继承 Vue.extend 创建一个类：

   import Vue from 'vue'export default class MyComponent extends Vue {  // 组件内容}

2. 注册组件：

   // 在 Vue 实例中this.$options.components.MyComponent = MyComponent