Vue 3: script setup 用法的详尽探索

2023-10-03 19:01:09

Vue 3: script setup 简介

Vue 3 中的 script setup 是一个新的 API，它允许您使用 JavaScript 对象来定义组件的逻辑。这使得组件的编写更加简洁和灵活。

在 script setup 中，您可以使用以下属性：

template : 定义组件的模板。
setup : 定义组件的逻辑。
components : 定义组件的子组件。
props : 定义组件的属性。
data : 定义组件的数据。
methods : 定义组件的方法。
watch : 定义组件的侦听器。
computed : 定义组件的计算属性。
slots : 定义组件的插槽。
emit : 定义组件的事件。

如何使用 script setup 编写组件

要使用 script setup 编写组件，您需要创建一个 .vue 文件。该文件的结构如下：

<template>
  <!-- 组件的模板 -->
</template>

<script setup>
  // 组件的逻辑
</script>

在 script setup 中，您可以使用 JavaScript 对象来定义组件的逻辑。例如，以下是一个使用 script setup 编写的简单组件：

<template>
  <h1>Hello, {{ name }}!</h1>
</template>

<script setup>
  const props = defineProps(['name'])
</script>

这个组件定义了一个名为 name 的属性，并将其值显示在 h1 元素中。

在 script setup 中使用 template

在 script setup 中，您可以使用 template 属性来定义组件的模板。模板可以使用 HTML、CSS 和 JavaScript 编写。

例如，以下是一个使用 template 属性定义组件模板的示例：

<template>
  <h1>Hello, {{ name }}!</h1>
  <p>This is a paragraph.</p>
</template>

<script setup>
  const props = defineProps(['name'])
</script>

这个组件的模板定义了一个 h1 元素和一个 p 元素。

在 script setup 中定义组件

在 script setup 中，您可以使用 components 属性来定义组件的子组件。子组件可以使用 .vue 文件或 JavaScript 对象来定义。

例如，以下是一个使用 components 属性定义子组件的示例：

<template>
  <MyComponent />
</template>

<script setup>
  const MyComponent = defineComponent({
    template: `<h1>Hello, world!</h1>`
  })
</script>

这个组件定义了一个名为 MyComponent 的子组件。这个子组件的模板定义了一个 h1 元素。

在 script setup 中使用 props

在 script setup 中，您可以使用 props 属性来定义组件的属性。属性是组件从父组件接收的数据。

例如，以下是一个使用 props 属性定义组件属性的示例：

<template>
  <h1>Hello, {{ name }}!</h1>
</template>

<script setup>
  const props = defineProps(['name'])
</script>

这个组件定义了一个名为 name 的属性。这个属性是从父组件接收的数据。

在 script setup 中使用 data

在 script setup 中，您可以使用 data 属性来定义组件的数据。数据是组件内部使用的私有数据。

例如，以下是一个使用 data 属性定义组件数据的示例：

<template>
  <h1>{{ count }}</h1>
  <button @click="increment">Increment</button>
</template>

<script setup>
  const data = reactive({
    count: 0
  })

  const methods = {
    increment() {
      data.count++
    }
  }
</script>