Vue에서 소품을 사용하는 방법

<blockquote><p>Vue에서는 props를 사용하여 구성 요소 간에 데이터를 전달합니다. 자식 컴포넌트가 받은 props를 부모 컴포넌트에 선언하고 자식 컴포넌트에서 props 옵션을 사용하여 받은 후 :prop-name="data"를 사용하여 데이터를 전달합니다. Vue를 사용하면 전달된 데이터의 정확성을 보장하기 위해 prop 유형을 지정할 수 있으며, 기본 옵션을 사용하여 기본값을 지정할 수 있습니다. 감시 옵션을 사용하여 소품 변경 사항을 모니터링할 수 있습니다. 소품을 활용하여 구성 요소 간의 통신과 재사용을 용이하게 합니다. </p></blockquote> <p><img src="https://img.php.cn/upload/article/202405/02/2024050221213431472.jpg" alt="Vue에서 소품을 사용하는 방법" ></p> <p><strong>Vue의 Prop 사용</strong></p> <p>Vue의 Prop은 구성 요소 간에 데이터를 전달하는 데 사용되며, 이를 통해 하위 구성 요소는 상위 구성 요소에서 전달된 데이터를 받을 수 있습니다. props 사용법은 다음과 같습니다. </p> <p><strong>1. 부모 컴포넌트에서 props를 선언합니다. </strong></p> <p>부모 컴포넌트에서 <code>props</code> 옵션을 사용하여 자식 컴포넌트가 받을 수 있는 props를 선언합니다. <code>props</code> 选项声明子组件可以接收的 prop：</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><code class="javascript">export default { props: ['propName'] }</code></pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div> <p><strong>2. 在子组件中使用 props</strong></p> <p>在子组件中，通过 <code>props</code> 选项接收父组件传递过来的 data：</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><code class="javascript">export default { props: ['propName'] }</code></pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div> <p><strong>3. 传递 props 数据</strong></p> <p>在父组件中，使用 <code><</code> 标记传递数据给子组件：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><code class="javascript"><child-component :prop-name="data"></child-component></code></p> <p>其中，<code>:prop-name</code> 是 prop 的名称，<code>data</code> 是要传递的数据。</p> <p><strong>4. prop 类型</strong></p> <p>Vue 允许为 props 指定类型，以确保传递的数据类型正确。类型可以使用任何基本 JavaScript 类型（例如字符串、数字、布尔值）或自定义类型。</p> <pre class="brush:php;toolbar:false"><code class="javascript">export default { props: { propName: { type: String, required: true } } }</code></pre><div class="contentsignin">로그인 후 복사</div></div> <p><strong>5. 默认值</strong></p> <p>如果未提供 prop，则可以使用 <code>default</code> 选项指定默认值：</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><code class="javascript">export default { props: { propName: { default: 'default value' } } }</code></pre><div class="contentsignin">로그인 후 복사</div></div> <p><strong>6. 监听 prop</strong></p> <p>当 prop 更新时，可以使用 <code>watch</code> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><code class="javascript">export default { props: ['propName'], watch: { propName(newValue, oldValue) { // prop 更新时的操作 } } }</code></pre><div class="contentsignin">로그인 후 복사</div></div> <p>2. 하위 구성 요소에서 props를 사용 중</p>🎜🎜 하위 구성 요소에서 <code>props</code> 옵션을 사용하여 상위 구성 요소가 전달한 데이터를 받습니다: 🎜rrreee🎜🎜3. Props 데이터 전달 🎜상위 구성 요소에서 < 태그를 사용하여 하위 구성 요소에 데이터를 전달합니다. 🎜rrreee🎜 여기서 <code>:prop-name</code>은 prop의 이름이고 data는 전달할 데이터입니다. 🎜🎜🎜4. Prop 유형🎜🎜🎜Vue를 사용하면 전달된 데이터 유형이 올바른지 확인하기 위해 prop 유형을 지정할 수 있습니다. 유형은 기본 JavaScript 유형(예: 문자열, 숫자, 부울) 또는 사용자 정의 유형을 사용할 수 있습니다. 🎜rrreee🎜🎜5. 기본값🎜🎜🎜prop이 제공되지 않은 경우 <code>default</code> 옵션을 사용하여 기본값을 지정할 수 있습니다: 🎜rrreee🎜🎜6 prop 듣기🎜🎜🎜. 업데이트되면 <code>watch</code> 옵션을 사용하여 prop 변경 사항을 모니터링할 수 있습니다. 🎜rrreee🎜prop를 사용하면 Vue 구성 요소 간에 데이터를 쉽게 전달하여 구성 요소 간 통신 및 재사용을 촉진할 수 있습니다. 🎜

위 내용은 Vue에서 소품을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!