Cara menggunakan prop dalam vue

<blockquote><p>Dalam Vue, prop digunakan untuk menghantar data antara komponen. Isytiharkan prop yang diterima oleh komponen anak dalam komponen induk, gunakan pilihan prop dalam komponen anak untuk menerimanya dan gunakan :prop-name="data" untuk menghantar data. Vue membenarkan anda untuk menentukan jenis prop untuk memastikan ketepatan data yang diluluskan, dan anda boleh menggunakan pilihan lalai untuk menentukan nilai lalai. Pilihan jam tangan boleh digunakan untuk memantau perubahan prop. Manfaatkan prop untuk memudahkan komunikasi dan penggunaan semula antara komponen. </p></blockquote> <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/202405/02/2024050221213431472.jpg" class="lazy" alt="Cara menggunakan prop dalam vue" ></p> <p><strong>Penggunaan Props dalam Vue</strong></p> <p>Props dalam Vue digunakan untuk menghantar data antara komponen, yang membolehkan komponen anak menerima data yang dihantar daripada komponen induk. Berikut ialah penggunaan prop: </p> <p><strong>1. Istiharkan prop dalam komponen induk </strong></p> <p>Dalam komponen induk, gunakan pilihan <code>props</code> untuk mengisytiharkan prop yang boleh diterima oleh komponen anak: <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;'>export default { props: ['propName'] }</pre><div class="contentsignin">Salin selepas log masuk</div></div><div class="contentsignin">Salin selepas log masuk</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;'>export default { props: ['propName'] }</pre><div class="contentsignin">Salin selepas log masuk</div></div><div class="contentsignin">Salin selepas log masuk</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;'><child-component :prop-name="data"></child-component></pre><div class="contentsignin">Salin selepas log masuk</div></div><p>其中，<code>:prop-name</code> 是 prop 的名称，<code>data</code> 是要传递的数据。</p><p><strong>4. prop 类型</strong></p><p>Vue 允许为 props 指定类型，以确保传递的数据类型正确。类型可以使用任何基本 JavaScript 类型（例如字符串、数字、布尔值）或自定义类型。</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>export default { props: { propName: { type: String, required: true } } }</pre><div class="contentsignin">Salin selepas log masuk</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;'>export default { props: { propName: { default: 'default value' } } }</pre><div class="contentsignin">Salin selepas log masuk</div></div><p><strong>6. 监听 prop</strong></p><p>当 prop 更新时，可以使用 <code>watch</code> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>export default { props: ['propName'], watch: { propName(newValue, oldValue) { // prop 更新时的操作 } } }</pre><div class="contentsignin">Salin selepas log masuk</div></div><p>2. Dalam Gunakan prop dalam komponen kanak-kanak</p>🎜🎜Dalam komponen anak, gunakan pilihan <code>props</code> untuk menerima data yang diluluskan oleh komponen induk: 🎜rrreee🎜🎜3 🎜Dalam komponen induk, gunakan tag < menghantar data kepada komponen anak: 🎜rrreee🎜di mana, <code>:prop-name</code> ialah nama prop dan data ialah data yang akan dihantar. 🎜🎜🎜4. Jenis prop🎜🎜🎜Vue membolehkan anda menentukan jenis prop untuk memastikan jenis data yang diluluskan adalah betul. Jenis boleh menggunakan mana-mana jenis JavaScript asas (cth. rentetan, nombor, boolean) atau jenis tersuai. 🎜rrreee🎜🎜5. Nilai lalai🎜🎜🎜Jika prop tidak disediakan, anda boleh menggunakan pilihan <code>default</code> untuk menentukan nilai lalai: 🎜rrreee🎜🎜6 Mendengar prop🎜🎜🎜W dikemas kini, anda boleh menggunakan pilihan <code>watch</code> untuk memantau perubahan prop: 🎜rrreee🎜Dengan menggunakan prop, anda boleh menghantar data dengan mudah antara komponen Vue, mempromosikan komunikasi dan penggunaan semula antara komponen. 🎜

Atas ialah kandungan terperinci Cara menggunakan prop dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!