<blockquote><p>在 Vue 中，props 用於在元件間傳遞資料。在父元件宣告子元件接收的 props，在子元件使用 props 選項接收，並使用 :prop-name="data" 傳遞資料。 Vue 允許指定 prop 類型以確保傳遞資料的正確性，並可使用 default 選項指定預設值。 watch 選項可用於監聽 prop 的變更。利用 props 可促進組件間通訊和重複使用。 </p></blockquote>
<p><img src="https://img.php.cn/upload/article/202405/02/2024050221213431472.jpg" alt="vue中props的用法" ></p>
<p><strong>Vue 中Props 的用法</strong></p>
<p>Vue 中的props 用於在元件之間傳遞數據，它允許子元件接收從父元件傳遞過來的資料。以下是props 的用法：</p>
<p><strong>1. 在父元件中宣告props</strong></p>
<p>在父元件中，使用<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> 選項來監聽prop 的變化：</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>透過使用props，可以輕鬆地在Vue 組件之間傳遞數據，促進組件間的通訊和重用。 </p>
以上是vue中props的用法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
