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>