在Vue 3中，定义组件有多种方式，包括使用单文件组件（Single File Components, SFC）、使用JavaScript对象定义组件、以及使用组合式API（Composition API）。
1. 单文件组件（SFC）
这是Vue最常见的组件定义方式，使用.vue文件。
示例：MyComponent.vue
<template><div><h1>{{ title }}</h1><button @click="increment">Click me</button><p>Count: {{ count }}</p></div>
</template><script>
export default {name: 'MyComponent',data() {return {title: 'Hello, Vue 3!',count: 0};},methods: {increment() {this.count++;}}
};
</script><style scoped>
h1 {color: blue;
}
</style>
使用组件
<template><div id="app"><MyComponent /></div>
</template><script>
import MyComponent from './components/MyComponent.vue';export default {name: 'App',components: {MyComponent}
};
</script>
2. 使用JavaScript对象定义组件
你可以直接在JavaScript文件中定义组件。
示例：MyComponent.js
export default {name: 'MyComponent',template: `<div><h1>{{ title }}</h1><button @click="increment">Click me</button><p>Count: {{ count }}</p></div>`,data() {return {title: 'Hello, Vue 3!',count: 0};},methods: {increment() {this.count++;}}
};
使用组件
<template><div id="app"><MyComponent /></div>
</template><script>
import MyComponent from './components/MyComponent.js';export default {name: 'App',components: {MyComponent}
};
</script>
3. 使用组合式API（Composition API）
Vue 3引入了组合式API，使得组件逻辑更加灵活和可重用。
示例：MyComponent.vue
<template><div><h1>{{ title }}</h1><button @click="increment">Click me</button><p>Count: {{ count }}</p></div>
</template><script>
import { ref } from 'vue';export default {name: 'MyComponent',setup() {const title = ref('Hello, Vue 3!');const count = ref(0);const increment = () => {count.value++;};return {title,count,increment};}
};
</script><style scoped>
h1 {color: blue;
}
</style>
使用组件
<template><div id="app"><MyComponent /></div>
</template><script>
import MyComponent from './components/MyComponent.vue';export default {name: 'App',components: {MyComponent}
};
</script>
4. 全局注册组件
你也可以全局注册组件，这样就不需要在每个使用的地方单独引入。
示例：main.js
import { createApp } from 'vue';
import App from './App.vue';
import MyComponent from './components/MyComponent.vue';const app = createApp(App);app.component('MyComponent', MyComponent);app.mount('#app');
使用组件
<template><div id="app"><MyComponent /></div>
</template><script>
export default {name: 'App'
};
</script>
)
