안녕하세요! Props는 Vue.js에서 가장 필요한 부분 중 하나이며, 구성요소 간 정보 교환을 가능하게 해줍니다. 소품 사용은 설정 기능 내에서 수행됩니다. 아래는 <스크립트 설정> 다음 작업 방법을 자세히 알아보세요.
<template> <div> <h1>{{ title }}</h1> <p>{{ message }}</p> </div> </template> <script setup> import { defineProps } from 'vue' // Props-larni aniqlash const props = defineProps({ title: { type: String, required: true }, message: { type: String, default: 'Default message' } }) </script>
여기서 props 객체는 제목과 메시지 props를 정의합니다. title prop 유형은 문자열이고 필수(필수: true)이며, 메시지에는 문자열 유형과 기본값(기본 메시지)이 있습니다.
<template> <div> <h1>{{ title }}</h1> <p>{{ message }}</p> </div> </template> <script setup> const props = defineProps({ title: { type: String, required: true }, message: { type: String, default: 'Default message' } }) // Props-larni ishlatish console.log(props.title) console.log(props.message) </script>
<script setup> const props = defineProps({ id: { type: Number, required: true }, user: { type: Object, default: () => ({ name: 'Johon', age: 30 }) } }) </script>
위 예에서 id prop은 Number 유형이고 필수이고, user prop은 Object 유형이고 기본값을 갖습니다.
기본값을 사용하면 Vue 3의 props에 대해 사전 정의된 값을 정의할 수 있습니다. 소품이 구성 요소로 전송되지 않으면 Vue는 기본값을 사용합니다. 구성요소를 더욱 사용하기 쉽고 안전하게 만들어주기 때문에 더욱 편리합니다.
다음 글에서는 Vue3에서의 Emission에 대해 이야기해보겠습니다.
네트워크에서 우리를 팔로우할 수 있으며 기사가 유용했다면 댓글과 Vuechi를 통해 친구들과 공유할 수 있습니다. ?
위 내용은 Vue.js는 Props 개념을 제공합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!