vue3定义组件

在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>