【Vue 3组件的使用】

什么是Vue 3组件？

Vue 3的一个重要概念是组件化开发。组件是Vue应用的构建块，它允许你将用户界面分解为小而独立的部分，每个部分都有自己的状态、模板和行为。这种模块化方法使得代码更容易维护和测试。

创建一个简单的Vue 3组件

这个组件将显示一个问候语。

<template>
  <div>
    <h1>{{ greeting }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      greeting: "Hello, Vue 3!"
    };
  }
};
</script>

上述代码创建了一个名为Greeting的Vue组件，它包含一个数据属性greeting，并在模板中显示这个属性的值。

在应用中使用组件

要在Vue应用中使用这个组件，首先需要将其导入并注册。

import { createApp } from 'vue';
import App from './App.vue';
import Greeting from './components/Greeting.vue';

const app = createApp(App);

// 注册Greeting组件
app.component('Greeting', Greeting);

app.mount('#app');

可以在任何Vue模板中使用<Greeting></Greeting>标签来呈现这个组件。

传递数据到组件

Vue 3允许通过props将数据传递到组件。例如，如果要动态设置问候语，可以将greeting作为prop传递给组件。

<template>
  <div>
    <h1>{{ greeting }}</h1>
  </div>
</template>

<script>
export default {
  props: {
    greeting: String
  }
};
</script>

在使用组件时，可以通过v-bind指令将数据传递给它：

<template>
  <div>
    <Greeting :greeting="customGreeting"></Greeting>
  </div>
</template>

<script>
import Greeting from './components/Greeting.vue';

export default {
  components: {
    Greeting
  },
  data() {
    return {
      customGreeting: "Hello, Custom!"
    };
  }
};
</script>