Teilen Sie Beispiel-Tutorials für vue2.X-Komponenten

Fokus: Kommunikation zwischen Eltern- und Kinderkomponenten

Sehen Sie sich das Bild an und sprechen Sie:

Pass Props

• Die untergeordnete Komponente selbst ist von der übergeordneten Komponente isoliert. Sie empfängt die Daten der übergeordneten Komponente über das in der untergeordneten Komponente deklarierte props-Attribut;

• Wenn die Daten der übergeordneten Komponente werden aktualisiert, die Requisiten der Unterkomponente werden entsprechend aktualisiert

• Dieser Datenfluss ist unidirektional (beobachten);

  Ereignisse ausgeben

Die untergeordnete Komponente verwendet $.emit(fn), um ihre eigenen intern ausgelösten Ereignisse auszuwerfen;

• Tut das übergeordnete Komponente hören? Wenn die übergeordnete Komponente zuhören muss, verwenden Sie
, um den Listener zu binden und das entsprechende Ereignis auszulösen.

• v-on

  Das Obige ist eine allgemeine Sprache und eine spezifische Analyse von

child Die Komponente kann eine Zeichenfolge empfangen und {{label}} kann innerhalb der untergeordneten Komponente

verwendet werden

<v-input label="姓名"></v-input>

Die untergeordnete Komponente kann dynamische Parameter empfangen

Was soll ich tun, wenn die Unterkomponente diese nach Erhalt der Daten versehentlich ändert und möchte? um es zu verarbeiten?

<input v-model="msg" /><v-profile :message="msg"></v-profile>

Erstellen Sie eine Kopie der Requisite (eine tiefe Kopie wird empfohlen), verarbeiten Sie die Kopie und lassen Sie die Requisite unberührt

• Nach den Daten Wenn sich die übergeordnete Komponente ändert, wird die untergeordnete Requisite der Komponente automatisch aktualisiert, die Kopie dieser Requisite jedoch nicht?

Verwenden Sie watch, um diese Requisite zu überwachen und die Kopie zu aktualisieren, wenn sie sich ändert.

• Was soll ich tun, wenn ich die übergeordnete Komponente benachrichtigen möchte? wenn sich die Requisitenkopie der untergeordneten Komponente ändert?

Verwenden Sie watch, um diese Kopie zu überwachen und ihre eigenen intern ausgelösten Ereignisse auszulösen, wenn sie sich ändert

• . . .

Eigentlich das oben Genannte? ? ? In 2.3 gibt es eine bessere Methode. Schauen Sie sich einfach die vorherige an.

.sync-Modifikator

Ich habe es verwendet und die Änderung war erfolgreich,

***父组件***
<input v-model="msg" />
<v-profile :message.sync="msg"></v-profile>
***子组件***$.emit('update:message',newValue)

aber ich habe eine Fehlermeldung erhalten, als ich die Konsole geöffnet habe! ! !

vue.esm.js?65d7:434 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "message"

Wenn die untergeordnete Komponente die übergeordnete Komponente auslösen möchte, kann sie etwas ausgeben (die übergeordnete Komponente muss auf das Auslösen von Was hören). über die übergeordnete Komponente, die das untergeordnete Komponentenereignis auslöst?

Durch die Verwendung des ref-Attributs für die referenzierte untergeordnete Komponente ruft die übergeordnete Komponente die Methode und das Attribut der untergeordneten Komponente auf

• Aber!
wird erst ausgefüllt, nachdem die Komponente gerendert wurde, und reagiert nicht. Es ist nur als Workaround für den direkten Zugriff auf untergeordnete Komponenten gedacht – die Verwendung von

in Vorlagen oder berechneten Eigenschaften sollte vermieden werden.

$refsFokus: Kommunikation zwischen Nicht-Eltern-Kind-Komponenten$refs

Verwenden Sie eine leere Vue-Instanz als zentralen Ereignisbus

Bedenken Sie Vuex

var bus = new Vue();// 触发组件 A 中的事件bus.$emit('id-selected', 1)// 在组件 B 创建的钩子中监听事件bus.$on('id-selected', function (id) {  // ...})

Bedenken: Verwendung von Slots in Komponenten

Erstens ist es ungültig, Inhalte in der Mitte der Beschriftung der untergeordneten Komponente in der übergeordneten Komponente zu platzieren. Dann erscheint der Slot.

Umgangssprachliche Version:

Erklärung in einem Satz: Der Hauptinhalt wird in das Tag der untergeordneten Komponente in der übergeordneten Komponente geschrieben und der entsprechende Inhalt des untergeordneten Elements Komponente wird nach der Kompilierung eingefügt. Position

<span style="color: #000000">匿名slot:
    slot标签存在与子组件template中；
    子组件在父组件中使用的时候，子组件标签中的结构会在编译后替换子组件的slot标签；<br>    如果子组件中没有slot，则父组件中子组件标签中的内容会消失；
具名slot:
    顾名思义，是具有name属性的slot标签；并有匿名组件的特性（以上）；
    子组件在父组件中使用的时候，子组件中的结构中会有某些标签拥有slot属性并赋值，这些会在编译后替换子组件的相应slot标签；</span>

Um ehrlich zu sein, verstehe ich in dieser Hinsicht nicht einmal, warum ich geslotet werden möchte.

Offizielle Erklärung zum Eingang

Der Beamte gab ein Beispiel für das Layout:

Code anzeigen

<div class="container">
  <header><slot name="header"></slot>
  </header>
  <main><slot></slot>
  </main>
  <footer><slot name="footer"></slot>
  </footer></div>

Code anzeigen

<app-layout>
  <h1 slot="header">这里可能是一个页面标题</h1>
  <p>主要内容的一个段落。</p>
  <p>另一个主要段落。</p>
  <p slot="footer">这里有一些联系信息</p>
</app-layout>

Fokus: Dynamische Komponenten Verwenden von <br>

Durch die Verwendung des reservierten

-Elements und die dynamische Bindung an sein
• -Attribut ermöglichen wir mehreren Komponenten, denselben Mount-Punkt zu verwenden und dynamisch zu wechseln: Sehr gut geeignet zum Erstellen von Tab -ähnliche Effekte

  <component>is

• 在methods属性中定义一个函数修改currentView即可。

• 视情况可以配合 keep-alive 避免重新渲染

• 在子组件上放置activate钩子做切换时的工作：done() //放到钩子最后，表示执行工作完毕，可以切换组件，配合keep-alive使用，activate钩子只执行一次

• 子组件接收数据和以往相同，只是这一次都写在了component中，只是如此的话，每个子组件都需要有这些接口(prop)

暂时说到这里，突然得回头看一下react，没时间了，回头会继续。

以上的满基础的（我是新手），有什么不对的求指出，感谢！！！

<br>

 

Das obige ist der detaillierte Inhalt vonTeilen Sie Beispiel-Tutorials für vue2.X-Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!