So verwenden Sie Requisiten in Vue

<blockquote><p>In Vue werden Requisiten verwendet, um Daten zwischen Komponenten zu übertragen. Deklarieren Sie die von der untergeordneten Komponente empfangenen Requisiten in der übergeordneten Komponente, verwenden Sie die Option props in der untergeordneten Komponente, um sie zu empfangen, und verwenden Sie :prop-name="data", um Daten zu übergeben. Mit Vue können Sie Requisitentypen angeben, um die Richtigkeit der übergebenen Daten sicherzustellen, und Sie können die Standardoption verwenden, um Standardwerte anzugeben. Mit der Watch-Option können Requisitenänderungen überwacht werden. Nutzen Sie Requisiten, um die Kommunikation und Wiederverwendung zwischen Komponenten zu erleichtern. </p></blockquote> <p><img src="https://img.php.cn/upload/article/202405/02/2024050221213431472.jpg" alt="So verwenden Sie Requisiten in Vue" ></p> <p><strong>Verwendung von Requisiten in Vue</strong></p> <p>Requisiten in Vue werden zum Übergeben von Daten zwischen Komponenten verwendet, wodurch untergeordnete Komponenten Daten empfangen können, die von übergeordneten Komponenten übergeben wurden. Das Folgende ist die Verwendung von Requisiten: </p> <p><strong>1. Deklarieren Sie Requisiten in der übergeordneten Komponente. </strong></p> <p>Verwenden Sie in der übergeordneten Komponente die Option <code>props</code>, um die Requisiten zu deklarieren, die die untergeordnete Komponente empfangen kann: <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">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</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">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</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">Nach dem Login kopieren</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">Nach dem Login kopieren</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">Nach dem Login kopieren</div></div> <p>2. In untergeordneten Komponenten verwenden Sie die Option <code>props</code>, um die von der übergeordneten Komponente übergebenen Daten zu empfangen: </p>rrreee🎜🎜3 🎜In der übergeordneten Komponente verwenden Sie < übergibt Daten an die untergeordnete Komponente: 🎜rrreee🎜wobei <code>:prop-name</code> der Name der Requisite ist und data sind die zu übergebenden Daten. 🎜🎜🎜4. Requisitentyp🎜🎜🎜Vue ermöglicht die Angabe von Typen für Requisiten, um sicherzustellen, dass der übergebene Datentyp korrekt ist. Typen können jeden grundlegenden JavaScript-Typ (z. B. Zeichenfolge, Zahl, Boolescher Wert) oder einen benutzerdefinierten Typ verwenden. 🎜rrreee🎜🎜5. Standardwert🎜🎜🎜Wenn prop nicht angegeben ist, können Sie die Option <code>default</code> verwenden, um einen Standardwert anzugeben: 🎜rrreee🎜🎜6. Auf Prop achten🎜🎜🎜Wenn prop aktualisiert wird, können Sie die Option <code>watch</code> verwenden, um Requisitenänderungen zu überwachen: 🎜rrreee🎜Durch die Verwendung von Requisiten können Sie Daten einfach zwischen Vue-Komponenten weitergeben und so die Kommunikation und Wiederverwendung zwischen Komponenten fördern. 🎜

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Requisiten in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!