첫 번째로 컴포넌트 프로퍼티를 선언하여 사용합니다.

스크립트 블록 내에서 export를 사용해 변수를 선언하면 해당 변수는 컴포넌트 프로퍼티(props)가 됩니다.

프로퍼티 선언 예

<script>
export let name;    // 개발자 모드에서 warning이 나와요. 다음처럼 초깃값을 쓰는 걸 추천
export let name="홍길동"  // 상위 컴포넌트가 읽고 쓸 수 있는 값이 됩니다.
export const name = "홍길동" // 상위 컴포넌트는 읽을 수만 있어요.
export function greeting(name) {   // 함수 형태로도 사용합니다. 
    alert("안녕하세요 ${name} 님!");
}
</script>

위 코드에 export를 사용해 선언된 변수들은 상위 컴포넌트에서도 접근할 수 있는 프로퍼티가 됩니다.

두 번째로 스크립트 블록에 선언된 변수들은 반응형 변수(reactive variable)로 사용할 수 있습니다.

선언된 변수를 화면에 표시했거나 변수를 수정해서 화면을 다시 렌더링하고 싶다면 그냥 변수를 할당 연산자(=)를 사용해 변경하면 됩니다. 그러면 자동으로 화면이 바뀝니다. 렌더링을 위한 코드는 작성할 필요가 없습니다.