Nuxt3 入门教程——组件

Nuxt3 组件入门教程

在这篇教程中，我们将学习如何使用 Nuxt3 创建一个简单的组件。我们将使用组合式 API 来实现这个组件。

安装 Nuxt3

首先，我们需要安装 Nuxt3。在终端中运行以下命令：

npx create-nuxt-app my-nuxt3-app

然后选择 Nuxt3 作为框架。

创建一个新的组件

在 components 文件夹中创建一个名为 MyComponent.vue 的新文件。接下来，我们将使用组合式 API 编写这个组件。

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="increment">点击次数: {{ count }}</button>
  </div>
</template>

<script>
import { ref, computed } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const message = computed(() => `你已经点击了 ${count.value} 次`)

    function increment() {
      count.value++
    }

    return {
      count,
      message,
      increment
    }
  }
}
</script>

在这个组件中，我们使用了 ref 和 computed 从 vue 中导入。我们在 setup 函数中定义了一个响应式变量 count 和一个计算属性 message。我们还定义了一个 increment 函数，用于增加 count 的值。

在页面中使用组件

现在我们可以在页面中使用这个组件。在 pages/index.vue 文件中，导入并使用 MyComponent。

<template>
  <div>
    <MyComponent />
  </div>
</template>

<script>
import MyComponent from '~/components/MyComponent.vue'

export default {
  components: {
    MyComponent
  }
}
</script>

父子组件

1. 创建父组件 Parent.vue

<template>
  <div>
    <h1>父组件</h1>
    <Child :message="parentMessage" @childEvent="handleChildEvent" />
  </div>
</template>

<script>
import { ref } from 'vue'
import Child from './Child.vue'

export default {
  components: {
    Child
  },
  setup() {
    const parentMessage = ref('来自父组件的信息')
    const handleChildEvent = (eventData) => {
      console.log('子组件事件触发:', eventData)
    }

    return {
      parentMessage,
      handleChildEvent
    }
  }
}
</script>

2. 创建子组件 Child.vue

<template>
  <div>
    <h2>子组件</h2>
    <p>{{ message }}</p>
    <button @click="emitEvent">触发父组件事件</button>
  </div>
</template>

<script>
import { defineProps, defineEmit } from 'vue'

export default {
  props: {
    message: String
  },
  setup() {
    const emitEvent = defineEmit(['childEvent'])

    const triggerEvent = () => {
      emitEvent('子组件事件数据')
    }

    return {
      triggerEvent
    }
  }
}
</script>

现在在浏览器中运行你的 Nuxt3 应用，你应该可以看到 MyComponent 组件的内容，并且可以通过点击按钮来增加点击次数。

npm run dev

访问 http://localhost:3000，你将看到组件的标题和按钮。点击按钮，你会看到点击次数的变化。

这就是使用 Nuxt3 和组合式 API 创建一个简单组件的方法。你可以继续尝试使用更多的 Vue 3 功能，如 watch 和 onMounted，以及 Nuxt3 提供的特性，如自动导入组件和文件系统路由。