Vue Component kann Prop nicht finden

Ziemlich grundlegende Implementierung von Vue hier als Testlauf, und ich habe einige Probleme beim Ausbrechen von Daten in Komponenten. Hier ist HTML:Vue Component kann Prop nicht finden

<body> 
    <header id="main-header"> 
     <custom-header></custom-header> 
    </header> 
</body>

Ich bin eine Vue Instanz instanziieren und an die # main-Header zu binden:

import CustomHeader from '../header.vue'; 

chx = { 
    dates: { dateFormatted:"2016-01-01"}, 
    title: "Hello World", 
    settingsVisible: false 
} 

const header = new Vue({ 
    el: '#main-header', 
    data: chx, 
    components: { 
     'custom-header': CustomHeader 
    }, 
    methods: { 
     run: function() { 
      console.log('run'); 
     }, 
     print: function() { 
      window.print() 
     }, 
     save: function() { 
      console.log('save'); 
     } 
    } 
});

Und die importierte Vorlage:

<template> 
<div> 
    <div class="header-menu"> 
     <img class="logo" src="images/logo.png"> 
    </div> 
    <i v-on:click="run" id="run" class="fa fa-3x fa-play-circle run-icon no-print" aria-hidden="true"></i> 
    <div class="header-menu"> 
     <h1 id="date-range-label"><span v-show="dates.startFormatted">{{dates.startFormatted}} - {{dates.endFormatted}}</span></h1> 
     <i v-on:click="settingsVisible = !settingsVisible" id="settings" class="fa fa-2x fa-cog settings-icon no-print"></i> 
    </div> 
</div> 
</template> 

<script> 
    export default { 
     props: ['title', 'dates'] 
    } 
</script>

Mein größtes Problem ist dass meine Vorlage keine Daten aus dem Objekt chx finden kann, das ich erstellt habe. Ich bekomme den Fehler "TypeError: Cannot read property 'startFormatted' of undefined". Ich nehme an, ich muss bind verwenden, aber ich bin mir nicht sicher, wie das in Verbindung mit v-show und v-on funktioniert.

Quelle

2017-07-13 Tyler Mills

Sie müssen die Eigenschaft an die Komponente in der Vorlage übergeben: '' Hier ist die [Dokumente auf Requisiten] (https://vuejs.org /v2/guide/components.html#Props) – thanksd

@thanksd Das schien für einige grundlegende Eigenschaften zu funktionieren. Wie greife ich auf übergeordnete Methoden wie 'run' zu? Ich erhalte einen Fehler von 'Ungültiger Handler für Ereignis" klick ": undefined' –

Entweder übergeben Sie es als eine Stütze oder definieren Sie die' run' Methode im Bereich Ihrer Kindkomponente. [Hier finden Sie die Dokumentation zu Komponenten] (https://vuejs.org/v2/guide/components.html). – thanksd

Zum ersten Teil, den Sie brauchen eine Stütze in header.vue Komponente zu definieren, etwa so:

props: { 
    'propname': { type: Object } 
}

und dann das chx Objekt übergeben, die Sie in übergeordneter Komponente erstellt:

<custom-header :propname="chx"></custom-header>

jetzt Sie können auf die Daten des Elternelements in der untergeordneten Komponente wie folgt zugreifen:

{{ propname.dates.startFormatted }}

Für den zweiten Teil der Frage müssen Sie ein Ereignis auslösen, um die übergeordnete Komponente zu benachrichtigen, die settingsVisible zu aktualisieren. Sie können, dass diese Art und Weise angehen:

<i v-on:click="toggleSettings()" id="settings" class="..."></i> 
// 
// 
methods: { 
    toggleSettings() { this.$emit('toggle'); } 
}

und in übergeordnete Komponente hören für toggle Ereignis:

<custom-header :propname="chx" v-on:toggle="chx.settingsVisible = !chxsettingsVisible"></custom-header>

Sie weitere Informationen durch das Lesen this document Seite bekommen.

Glückliche Codierung!

Quelle

2017-07-13 20:04:23 ironcladgeek

Vue Component kann Prop nicht finden

Antwort

Verwandte Themen