Wie Vue-Komponenten Requisiteneigenschaften übergeben und empfangen

Wie Vue-Komponenten Prop-Attribute übergeben und empfangen, erfordert spezifische Codebeispiele.

Vue ist ein beliebtes JavaScript-Framework, das häufig in der Front-End-Entwicklung verwendet wird. In Vue sind Komponenten die Grundeinheiten für die Erstellung von Anwendungen. Komponenten können Eigenschaften (Requisiten) übergeben und Eigenschaften (Requisiten) empfangen, was die Dateninteraktion zwischen Komponenten ermöglicht. In diesem Artikel wird detailliert beschrieben, wie Vue-Komponenten Requisitenattribute übergeben und empfangen, und es werden spezifische Codebeispiele bereitgestellt.

Übergabe von Requisitenattributen

In Vue können Sie Requisitenattribute übergeben, indem Sie die v-bind-Direktive für das Komponenten-Tag verwenden. Die v-bind-Direktive wird verwendet, um eine oder mehrere Eigenschaften dynamisch an einen Ausdruck zu binden. Das Folgende ist ein Beispiel, das zeigt, wie ein Requisitenattribut vom Typ String übergeben wird:

<template>
  <div>
    <child-component :message="parentMessage"></child-component>
  </div>
</template>

<script>
import ChildComponent from "./ChildComponent.vue";

export default {
  data() {
    return {
      parentMessage: "Hello from parent"
    };
  },
  components: {
    ChildComponent
  }
};
</script>

Im obigen Code übergibt die übergeordnete Komponente ein Requisitenattribut mit dem Namen message an die untergeordnete Komponente und bindet parentMessage Daten in der übergeordneten Komponente. message的prop属性，并绑定了父组件中的parentMessage数据。

在子组件中，可以通过在props选项中声明属性来接收传递的prop属性。以下是子组件的代码示例：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  }
};
</script>

在上述代码中，props选项中声明了一个名为message的属性，并指定了它的类型为字符串。required: true表示这个属性是必需的，如果父组件没有传递这个属性，将会在控制台输出一个警告。

接收prop属性

一旦在子组件中声明了prop属性，就可以在子组件的模板中使用它。以下是一个例子，展示了如何在子组件中接收和使用prop属性：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  }
};
</script>

在上述代码中，{{ message }}用于在子组件的模板中显示传递的prop属性。子组件将会显示Hello from parent。

需要注意的是，一旦声明了prop属性并在子组件中使用，它将被视为只读属性。如果试图在子组件内部修改prop属性的值，Vue会在控制台输出一个警告。

默认值

可以为prop属性设置一个默认值，在父组件不传递这个属性时，将使用默认值。以下是一个例子：

<template>
  <div>
    <child-component></child-component>
  </div>
</template>

<script>
import ChildComponent from "./ChildComponent.vue";

export default {
  components: {
    ChildComponent
  }
};
</script>

在子组件中，可以通过default选项来设置默认值：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      default: "Default message"
    }
  }
};
</script>

在上述代码中，如果父组件没有传递message属性，子组件将显示Default message

In untergeordneten Komponenten können Sie übergebene Prop-Eigenschaften erhalten, indem Sie die Eigenschaft in der Props-Option deklarieren. Das Folgende ist ein Codebeispiel für eine Unterkomponente:

rrreee

Im obigen Code wird eine Eigenschaft mit dem Namen message in der Option props deklariert und ihr Typ als Zeichenfolge angegeben . required: true gibt an, dass dieses Attribut erforderlich ist. Wenn die übergeordnete Komponente dieses Attribut nicht übergibt, wird eine Warnung an die Konsole ausgegeben.

Prop-Attribut empfangen🎜🎜Sobald ein Prop-Attribut in einer untergeordneten Komponente deklariert ist, kann es in der Vorlage der untergeordneten Komponente verwendet werden. Hier ist ein Beispiel, das zeigt, wie Prop-Attribute in einer untergeordneten Komponente empfangen und verwendet werden: 🎜rrreee🎜 Im obigen Code wird {{ message }} verwendet, um die übergebene Requisite in der Vorlage der untergeordneten Komponente anzuzeigen Eigentum. Die untergeordnete Komponente zeigt Hallo vom übergeordneten Element an. 🎜🎜Es ist zu beachten, dass das Prop-Attribut, sobald es in einer untergeordneten Komponente deklariert und verwendet wird, als schreibgeschützte Eigenschaft betrachtet wird. Wenn Sie versuchen, den Wert des prop-Attributs innerhalb einer untergeordneten Komponente zu ändern, gibt Vue eine Warnung an die Konsole aus. 🎜🎜Standardwert🎜🎜Sie können einen Standardwert für das Prop-Attribut festlegen. Wenn die übergeordnete Komponente dieses Attribut nicht übergibt, wird der Standardwert verwendet. Hier ist ein Beispiel: 🎜rrreee🎜In untergeordneten Komponenten können Sie den Standardwert über die Option default festlegen: 🎜rrreee🎜Im obigen Code, wenn die übergeordnete Komponente message Attribut, die untergeordnete Komponente zeigt <code>Standardmeldung an. 🎜🎜Zusammenfassung: 🎜🎜Dieser Artikel stellt vor, wie Vue-Komponenten Prop-Attribute übergeben und empfangen, und bietet spezifische Codebeispiele. In Vue können Prop-Eigenschaften mithilfe der v-bind-Direktive an untergeordnete Komponenten übergeben werden, und die untergeordnete Komponente kann sie empfangen, indem sie diese Eigenschaften in der Option props deklariert und verwendet. Darüber hinaus können Sie Standardwerte für Requisiteneigenschaften festlegen. Durch die Beherrschung dieses Wissens können Entwickler die Komponentenentwicklung effektiver durchführen und die Dateninteraktion zwischen Komponenten realisieren. 🎜

Das obige ist der detaillierte Inhalt vonWie Vue-Komponenten Requisiteneigenschaften übergeben und empfangen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!