Vue.js => Requisiten

Bemerkungen

camelCase <=> Kebab-Fall

Denken Sie bei der Definition der Namen Ihrer props immer daran, dass die Namen von HTML-Attributen nicht zwischen Groß- und Kleinschreibung unterscheiden. Das heißt, wenn Sie in Ihrer Komponentendefinition eine prop im Kamelfall definieren ...

Vue.component('child', {
    props: ['myProp'],
    ...
});

... Sie müssen es in Ihrer HTML-Komponente als my-prop bezeichnen.

Übergabe von Daten an Eltern mit Requisiten

In Vue.js verfügt jede Komponenteninstanz über einen eigenen isolierten Bereich . Wenn also eine übergeordnete Komponente über eine untergeordnete Komponente verfügt, hat die untergeordnete Komponente ihren eigenen isolierten Bereich und die übergeordnete Komponente ihren eigenen isolierten Bereich.

Bei mittelgroßen bis großen Anwendungen werden durch das Befolgen der Best Practices-Konventionen während der Entwicklungsphase und danach während der Wartung zahlreiche Kopfschmerzen vermieden. Es ist eines der folgenden Dinge, die vermieden werden, dass Elterndaten direkt von der untergeordneten Komponente referenziert / mutiert werden . Wie verweisen wir dann auf die übergeordneten Daten innerhalb einer untergeordneten Komponente?

Alle in einer untergeordneten Komponente erforderlichen übergeordneten Daten sollten als props vom übergeordneten props an das untergeordnete Element weitergegeben werden.

Use Case: Angenommen , wir eine User - Datenbank mit zwei Tabellen haben users und addresses mit den folgenden Feldern:
users Tabelle

Name	Telefon	Email
John Mclane	(1) 234 5678 9012	[email protected]
James Bond	(44) 777 0007 0077	[email protected]

addresses Tabelle

Block	Straße	Stadt
Nakatomi-Türme	Broadway	New York
Mi6 Haus	Buckingham Road	London

und wir möchten drei Komponenten haben, um entsprechende Benutzerinformationen überall in unserer App anzuzeigen

Benutzerkomponente.js

export default{
    template:`<div class="user-component">
                <label for="name" class="form-control">Name: </label>  
                <input class="form-control input-sm" name="name" v-model="name">
                <contact-details :phone="phone" :email="email"></contact-details>
              </div>`,
    data(){
        return{
            name:'',
            phone:'',
            email:''
        }
    },
}

contact-details.js

import Address from './address';
export default{
    template:`<div class="contact-details-component>
                <h4>Contact Details:</h4>
                <label for="phone" class="form-control">Phone: </label>  
                <input class="form-control input-sm" name="phone" v-model="phone">
                <label for="email" class="form-control">Email: </label>  
                <input class="form-control input-sm" name="email" v-model="email"> 
        
                <h4>Address:</h4>
                <address :address-type="addressType"></address>
                //see camelCase vs kebab-case explanation below
            </div>`,
    props:['phone', 'email'],
    data:(){
        return:{
            addressType:'Office'
        }
    },
    components:{Address}  
}

address.js

export default{
    template:`<div class="address-component">
                <h6>{{addressType}}</h6>
                <label for="block" class="form-control">Block: </label>  
                <input class="form-control input-sm" name="block" v-model="block">
                <label for="street" class="form-control">Street: </label>  
                <input class="form-control input-sm" name="street" v-model="street">
                <label for="city" class="form-control">City: </label>  
                <input class="form-control input-sm" name="city" v-model="city">
             </div>`,
    props:{
        addressType:{
            required:true,
            type:String,
            default:'Office'
        },
    data(){
        return{
            block:'',
            street:'',
            city:''
        }
    }
}

main.js

import Vue from 'vue';  
  
Vue.component('user-component', require'./user-component');  
Vue.component('contact-details', require'./contact-details');  

new Vue({
    el:'body'  
});

index.html

...  
<body>
    <user-component></user-component>
        ...
</body>

Wir zeigen die phone und email Daten an. email handelt es sich um Eigenschaften von user-component in contact-details die keine Telefon- oder E-Mail-Daten enthalten.

Daten als Requisiten übergeben

Innerhalb der user-component.js in der template- Eigenschaft, in der wir die Komponente <contact-details> enthalten, übergeben wir das Telefon und die E-Mail- Daten von <user-component> (übergeordnete Komponente) an <contact-details> ( untergeordnete Komponente) durch dynamisches Binden an die Requisiten - :phone="phone" und :email="email ist identisch mit v-bind:phone="phone" und v-bind:email="email"

Requisiten - Dynamische Bindung

Da wir die Requisiten dynamisch binden, wird jede Änderung in Telefon oder E-Mail innerhalb der übergeordneten Komponente, dh <user-component> , sofort in der untergeordneten Komponente, dh <contact-details> , widergespiegelt.

Requisiten - als Literale

Wenn wir jedoch die Werte von phone und email als String-Literal-Werte übergeben hätten, z. B. phone="(44) 777 0007 0077" email="[email protected]" , würde dies keine Datenänderungen widerspiegeln, die im übergeordneten phone="(44) 777 0007 0077" email="[email protected]" Komponente.

One-Way-Bindung

Standardmäßig ist die Richtung der Änderungen von oben nach unten, dh jede Änderung an dynamisch gebundenen Requisiten in der übergeordneten Komponente wird an die untergeordnete Komponente weitergegeben, aber jede Änderung an den Prop-Werten in einer untergeordneten Komponente wird nicht an die übergeordnete Komponente weitergegeben.

Zum Beispiel: Wenn wir innerhalb der <contact-details> die E-Mail von [email protected] in [email protected] , enthalten die übergeordneten Daten, dh die Telefondateneigenschaft in <user-component> , weiterhin den Wert [email protected] .

Wenn wir jedoch den Wert von email von [email protected] in [email protected] in der übergeordneten Komponente (in unserem Anwendungsfall <user-component> ändern, dann wird der Wert von email in der [email protected] Komponente ( <contact-details> In unserem Anwendungsfall wird automatisch in [email protected] Änderung im übergeordneten [email protected] wird sofort an das [email protected] .

Zwei-Wege-Bindung

Wenn Sie eine :email.sync="email" Bindung :email.sync="email" Bindung explizit angeben :email.sync="email" statt :email="email" . Wenn wir nun den Wert von prop in der untergeordneten Komponente ändern, wird die Änderung auch in der übergeordneten Komponente angezeigt.

In einer mittelgroßen bis großen App ist es sehr schwierig, den übergeordneten Status des untergeordneten Status zu ändern, insbesondere während des Debugging. - Seien Sie vorsichtig .

In Vue.js 2.0 ist keine .sync-Option verfügbar. Die wechselseitige Bindung für Requisiten wird in Vue.js 2.0 nicht mehr unterstützt .

Einmalige Bindung

Es ist auch möglich, die explizite einmalige Bindung als :email.once="email zu definieren :email.once="email , sie ähnelt mehr oder weniger der Übergabe eines Literalwerts, da nachfolgende Änderungen des übergeordneten Eigenschaftswerts nicht an das :email.once="email .

VORBEHALT
Wenn Object oder Array als Requisite übergeben wird, werden sie IMMER DURCH REFERENZEN EINGESCHLOSSEN. Dies bedeutet, unabhängig vom explizit definierten Bindungstyp :email.sync="email" oder :email="email" oder :email.once="email" Wenn E-Mail ein Objekt oder ein Array im übergeordneten Element ist, wirkt sich die Änderung des Prop-Werts innerhalb der untergeordneten Komponente unabhängig vom Bindungstyp auf den Wert im übergeordneten Element aus.

Requisiten als Array

In der Datei contact-details.js haben wir props:['phone', 'email'] definiert props:['phone', 'email'] als Array. contact-details.js ist in Ordnung, wenn wir keine fein abgestimmte Steuerung mit Requisiten wünschen.

Requisiten als Objekt

Wenn wir eine feinere Kontrolle über Requisiten wünschen, wie

wenn wir definieren wollen, welche Werte als Requisite akzeptabel sind
Was sollte ein Standardwert für die Requisite sein
ob ein Wert MUSS (erforderlich) für die Requisite übergeben werden muss oder optional ist

dann müssen wir die address.js verwenden, um die Requisiten zu definieren, wie wir es in address.js getan address.js .

Wenn wir wiederverwendbare Komponenten erstellen, die auch von anderen Entwicklern im Team verwendet werden können, ist es eine gute Praxis, Requisiten als Objekte zu definieren, sodass jeder, der die Komponente verwendet, eine klare Vorstellung davon hat, welche Art von Daten verwendet werden und ob es ist obligatorisch oder optional.

Es wird auch als Requisitenvalidierung bezeichnet . Der Typ kann einer der folgenden systemeigenen Konstruktoren sein:

String
Nummer
Boolean
Array
Objekt
Funktion
oder ein benutzerdefinierter Konstruktor

Einige Beispiele für die Validierung von Requisiten aus http://vuejs.org/guide/components.html#Props

Vue.component('example', {
   props: {
       // basic type check (`null` means accept any type)
       propA: Number,
       // multiple possible types (1.0.21+)
       propM: [String, Number],
       // a required string
       propB: {
         type: String,
         required: true
       },
       // a number with default value
       propC: {
          type: Number,
          default: 100
       },
       // object/array defaults should be returned from a
       // factory function
       propD: {
          type: Object,
          default: function () {
             return { msg: 'hello' }
         }
       },
       // indicate this prop expects a two-way binding. will
       // raise a warning if binding type does not match.
       propE: {
          twoWay: true
       },
       // custom validator function
       propF: {
          validator: function (value) {
             return value > 10
          }
       },
       // coerce function (new in 1.0.12)
       // cast the value before setting it on the component
       propG: {
          coerce: function (val) {
            return val + '' // cast the value to string
          }
       },
       propH: {
          coerce: function (val) {
            return JSON.parse(val) // cast the value to Object
          }
       }
    }
});

camelCase vs Kebab-Fall

Bei HTML-Attributen wird nicht zwischen addresstype und addressType unterschieden. addresstype addressType , dass zwischen addresstype und addressType nicht unterschieden werden kann. Wenn Sie Namen von camelCase-Attributen als Attribute verwenden, müssen Sie die entsprechenden Kebab-Großbuchstaben verwenden:
addressType sollte im HTML-Attribut als address-type geschrieben werden.

Dynamische Requisiten

So wie Sie Daten aus einer Sicht an das Modell binden können, können Sie Requisiten auch mit derselben V-Bind-Direktive binden, um Informationen von übergeordneten an untergeordnete Komponenten zu übergeben.

JS

new Vue({
    el: '#example',
    data: {
        msg: 'hello world'
    }
});

Vue.component('child', {
    props: ['myMessage'],
    template: '<span>{{ myMessage }}</span>
});

HTML

<div id="example">
    <input v-model="msg" />
    <child v-bind:my-message="msg"></child>
    <!-- Shorthand ... <child :my-message="msg"></child> -->
</div>

Ergebnis

hello world

Props übergeben, während Sie Vue JSX verwenden

Wir haben eine übergeordnete Komponente: Beim Importieren einer untergeordneten Komponente werden Requisiten über ein Attribut übergeben. Hier ist das Attribut 'src' und wir übergeben auch das 'src'.

ParentComponent.js

import ChildComponent from './ChildComponent';
export default {
    render(h, {props}) {
        const src = 'https://cdn-images-1.medium.com/max/800/1*AxRXW2j8qmGJixIYg7n6uw.jpeg';
        return (
           <ChildComponent src={src} />   
        );
    }
};

Und eine Kindkomponente, wo wir Requisiten übergeben müssen. Wir müssen angeben, welche Requisiten wir passieren.

ChildComponent.js:

export default {
    props: ['src'],
    render(h, {props}) {
        return ( 
            <a href = {props.src} download = "myimage" >
                Click this link
            </a>
        );
    }
};

Modified text is an extract of the original Stack Overflow Documentation

Lizenziert unter CC BY-SA 3.0

Nicht angeschlossen an Stack Overflow

Vue.js
Requisiten

Suche…