wie man Uhrfunktion in vue js benutzt

Question

konnten Sie mir bitte erklären, wie man Uhrfunktion in vue js verwendet. Ich versuchte zu verwenden, aber ich erhielt diesen Fehler.

vue.js:485 [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: "m" 

found in 

---> <AddTodo> 
     <Root> 

https://plnkr.co/edit/hVQKk3Wl9DF3aNx0hs88?p=preview

Ich habe verschiedene Komponenten und beobachten Eigenschaften in der Hauptkomponente

var AddTODO = Vue.extend({ 
    template: '#add-todo', 
    props: ['m'], 
    data: function() { 
     return { 
      message: '' 
     } 
    }, 
    methods: { 
     addTodo: function() { 
      console.log(this.message) 
      console.log(this.m); 
      this.m =this.message; 
     }, 
    }, 
}); 

Wenn ich versuche, item hinzufügen ich diese Störung erhalte. Schritt Dieser Fehler

1. Typ etwas auf Eingabefeld zu reproduzieren, und klicken Sie auf Add button

Answer 1

this.m =this.message; 

diese Linie ist die Frage,

Es wird empfohlen, dass Sie nicht ändern, prop direkt ...

stattdessen erstellen Sie eine Dateneigenschaft und dann modifiziere es.

Es wird eine Warnung angezeigt, weil Sie das Prop-Element ändern. Der Prop-Wert wird immer dann überschrieben, wenn die Elternkomponente erneut gerendert wird.

Answer 2

Die Komponentenstützen werden automatisch in der Komponente aktualisiert, sobald Sie ihren Wert außerhalb davon ändern. Aus diesem Grund ist es eine schlechte Idee, den Wert einer Eigenschaft innerhalb Ihrer Komponente zu ändern: Sie sollten die Requisiten als schreibgeschützt verwenden. Wenn Sie data eine Stütze als Anfangswert von einigen Ihrer Komponente verwenden möchten, können Sie einfach auf diese Weise erklären:

data: function() { 
    return { 
     changeable: this.receivedProp; 
    } 
}, 

aber sagen, dass, wenn Sie versuchen, aus dem Inneren des Wertes einer Stütze zu ändern eine Komponente, um deine neu zugewiesene Requisite außerhalb davon verwenden zu können, machst du es falsch. Die Art, wie Sie damit umgehen sollten, ist Vue's custom events. Denken Sie daran, wie Vue in der Dokumentation heißt es:

In Vue, die Eltern-Kind-Komponente Beziehung kann sich wie Requisiten zusammenfassen, Veranstaltungen auf. Das übergeordnete Element gibt Daten über Props an das untergeordnete Element weiter, und das untergeordnete Element sendet über Ereignisse Nachrichten an das übergeordnete Element.