Cú pháp sugar script setup trong Vue 3.x giúp giảm bớt sự phức tạp của Composition API ban đầu. Dưới đây là một số cách sử dụng phổ biến:

Bắt Đầu Sử Dụng Script Setup

1. Tắt plugin vetur và cài đặt plugin Volar.
2. Trong file tsconfig.json hoặc jsconfig.json, thêm các tùy chọn sau vào phần compilerOptions: "strict": true và "moduleResolution": "node".
3. Thêm thuộc tính setup vào thẻ <script>, có thể chỉ định ngôn ngữ bằng cách thêm lang="ts".

Ví dụ:

<script setup>
</script>

Hoặc sử dụng TypeScript
<script setup lang="ts">
</script>

Mã trong script setup sẽ được biên dịch thành nội dung của hàm setup() trong component. Điều này có nghĩa là mã trong script setup sẽ được thực thi mỗi khi một instance component mới được tạo ra, khác với script thông thường chỉ chạy một lần khi component được tải lần đầu tiên. Mọi biến, hàm, hay import được khai báo ở cấp độ cao nhất trong script setup đều có thể được sử dụng trực tiếp trong template.

Prop: Truyền Giá Từ Component Cha Đến Con

Để truyền giá từ component cha đến con, sử dụng API defineProps trong script setup. Ví dụ về truyền giá từ component cha:

<template>
  <myson info="Giá trị prop"></myson>
</template>
<script setup lang="ts">
import myson from './myson.vue'
</script>

Ví dụ về việc nhận giá trong component con:

<template>
  <p>{{ info }}</p>
</template>
<script setup lang="ts">
import { defineProps } from 'vue'

defineProps({
  info: {
    type: String,
    required: false,
    default: 'Giá trị mặc định'
  }
})
</script>

Emit: Gửi Sự Kiện Từ Component Con Đến Cha

Sử dụng API defineEmits để định nghĩa các sự kiện mà component con có thể gửi lên component cha. Ví dụ về việc gửi sự kiện từ component con:

<template>
  <button @click="triggerEvent">Gửi sự kiện</button>
</template>
<script setup lang="ts">
import { defineEmits } from 'vue'

const emits = defineEmits(['customEvent'])

const triggerEvent = () => {
  emits('customEvent', 'Thông điệp từ con')
}
</script>

Ví dụ về việc nhận sự kiện trong component cha:

<template>
  <myson @customEvent="handleEvent"></myson>
</template>
<script setup lang="ts">
import myson from './myson.vue'

const handleEvent = (message: string) => {
  console.log('Nhận sự kiện:', message)
}
</script>

Sử Dụng Provide và Inject Để Truyền Dữ Liệu Giữa Các Component

Sử dụng API provide và inject để truyền dữ liệu giữa các component cha và con cháu. Ví dụ về việc truyền dữ liệu từ component cha:

<script setup lang="ts">
import { provide } from 'vue'
const userId = 123
provide('userId', userId)
</script>

Ví dụ về việc nhận dữ liệu trong component con cháu:

<script setup lang="ts">
import { inject } from 'vue'
const receivedUserId = inject('userId')
</script>

Sử Dụng v-bind Trong Style

Có thể sử dụng v-bind để ràng buộc dữ liệu động trong phần style. Ví dụ:

<template>
  <span>Màu sắc động</span>
</template>
<script setup>
import { reactive } from 'vue'
const styles = reactive({
  textColor: 'blue'
})
</script>
<style scoped>
span {
  color: v-bind('textColor');
}
</style>